<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>掘金终极复刻版</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="loginpage.css">
    <link rel="stylesheet" href="personalPage.css">
    <style>
        /* 核心容器样式 [2,5](@ref) */
        .carousel {
            width: 100%;
            max-width: 1200px;
            height: 200px;
            margin: 2rem auto;
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }

        /* 轨道与图片样式 [1,3](@ref) */
        .slider-track {
            display: flex;
            height: 100%;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .slide {
            flex: 0 0 100%;
            min-width: 100%;
            position: relative;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 控制按钮样式 [5,6](@ref) */
        .ctrl-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            background: rgba(0,0,0,0.8);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            z-index: 10;
        }

        .ctrl-arrow::after {
            content: "";
            border: solid #fff;
            border-width: 0 3px 3px 0;
            padding: 5px;
        }

        .arrow-left { left: 1rem; transform: translateY(-50%) rotate(135deg); }
        .arrow-right { right: 1rem; transform: translateY(-50%) rotate(-45deg); }
        .ctrl-arrow:hover { background: rgba(0,0,0,0.95); transform: scale(1.1); }

        /* 指示点样式 [2,8](@ref) */
        .indicator-dots {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
        }

        .dot {
            width: 14px;
            height: 14px;
            background: rgba(255,255,255,0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
        }

        .dot.active {
            background: #fff;
            transform: scale(1.3);
        }
    </style>
</head>
<body>
<!-- 完整导航栏 -->
<nav class="nav">
    <div class="nav-brand">稀土掘金</div>
    <div class="nav-buttons">
        <button class="nav-button active firstPage">首页</button>
        <button class="nav-button">AI Coding</button>
        <button class="nav-button">沸点</button>
        <button class="nav-button">课程</button>
        <button class="nav-button">直播</button>
        <button class="nav-button">活动</button>
    </div>
    <input type="search" class="nav-search" placeholder="探索稀土掘金">
    <div class="nav-buttons personal1" style="margin-left: auto;">
        <button class="nav-button createCenter">创作者中心</button>
        <button class="nav-button">会员</button>
        <button class="nav-button Login">登录</button>
        <button class="nav-button Register" style="color: #1e80ff;margin-left: 8px;">注册</button>
    </div>
</nav>

<!-- 完整三栏内容 -->
<main>
    <!-- 左侧分类 -->
    <div class="left-side">
        <div class="category-list">
            <button class="active">综合</button>
            <button>后端</button>
            <button>前端</button>
            <button>Android</button>
            <button>iOS</button>
            <button>人工智能</button>
            <button>工具工人</button>
            <button>代码人生</button>
            <button>阅读</button>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="tab-buttons">
            <button class="tab-button active recommendArticle">推荐</button>
            <button class="tab-button newArticle">最新</button>
            <button class="tab-button TopArticle">Top</button>
        </div>
        <div class="articleContainer2">

        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="right-side">
        <div class="right-card">
            <div class="greeting-section">
                <h3>上午好！</h3>
                <button class="signin-btn">去签到</button>
            </div>
            <div class="rank-section">
                <h4>热门文章榜</h4>
                <ul class="rank-list">

                </ul>
            </div>
            <div class="carousel">
                <div class="ctrl-arrow arrow-left"></div>
                <div class="ctrl-arrow arrow-right"></div>

                <!-- 双向克隆结构 [1,6](@ref) -->
                <div class="slider-track">
                    <!-- 克隆最后一张到开头 -->
                    <div class="slide"><img src="../image/1.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                    <!-- 原始图片 -->
                    <div class="slide"><img src="../image/2.webp" alt="图片1" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/3.webp" alt="图片2" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/1.webp" alt="图片3" style="width: 100%;height: 100%"></div>
                    <!-- 克隆第一张到末尾 -->
                    <div class="slide"><img src="../image/2.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                </div>

                <div class="indicator-dots"></div>
            </div>
        </div>
    </div>
</main>

<!-- 添加到body末尾 -->
<div class="login-modal">
    <div class="login-container">
        <!-- 关闭按钮 -->
        <div class="close-btn">×</div>

        <!-- 左侧验证码登录 -->
        <div class="login-left">
            <h2>验证码登录 / 注册</h2>
            <div class="login-tip">登录掘金畅享更多权益</div>

            <div class="input-group">
                <select class="country-code">
                    <option>+86</option>
                </select>
                <input type="tel" placeholder="请输入邮箱" class="Loginemail">
            </div>

            <div class="input-group">
                <input type="text" placeholder="请输入密码" class="Loginpassword">
                <button class="get-code">获取验证码</button>
            </div>

            <button class="login-btn">登录/注册</button>

            <div class="other-login">
                <div class="other-title">其它登录：</div>
                <div class="social-icons">
                    <img src="image/GitHub.svg" width="24">
                    <img src="image/微信.svg" width="24">
                    <img src="image/微博.svg" width="24">
                </div>
            </div>
            <div class="toRegister">
                没有账号?去注册吧
            </div>
        </div>

        <!-- 右侧扫码登录 -->
        <div class="login-right">
            <div class="qrcode-area">
                <h4>扫码登录（6.4.1及以上版本支持）</h4>
                <div class="qrcode">
                    <img src="image/img.png" style="width:100%;height:100%">
                </div>
                <p>打开稀土掘金APP<br>点击"我-左上角扫一扫"登录</p>
            </div>
        </div>

        <!-- 协议声明 -->
        <div class="agreement">
            注册登录即表示同意
            <a href="#">用户协议</a>和<a href="#">隐私政策</a>
        </div>
    </div>
</div>

</body>
</html>
<script>
    // 完整交互逻辑
    document.querySelectorAll('.nav-button').forEach(button => {
        button.addEventListener('click', function() {
            document.querySelectorAll('.nav-button').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });
    });

    document.querySelectorAll('.category-list button').forEach(button => {
        button.addEventListener('click', function() {
            document.querySelectorAll('.category-list button').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });
    });

    document.querySelectorAll('.tab-button').forEach(button => {
        button.addEventListener('click', function() {
            document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>




<!--这里是控制轮播图逻辑的函数-->
<script>
    // 配置参数 [5,7](@ref)
    const CONFIG = {
        autoPlayInterval: 5000,    // 自动播放间隔
        transitionDuration: 600,  // 过渡动画时间
        cloneSwitchDelay: 500      // 克隆图切换延迟
    };

    // DOM元素初始化
    const track = document.querySelector('.slider-track');
    const dotsContainer = document.querySelector('.indicator-dots');
    const [leftBtn, rightBtn] = document.querySelectorAll('.ctrl-arrow');

    let currentIndex = 1;          // 当前索引（从真实第一张开始）
    const realCount = 3;           // 真实图片数量
    const totalSlides = realCount + 2; // 包含克隆图总数

    // 初始化指示点 [2,8](@ref)
    function createDots() {
        for(let i=0; i<realCount; i++) {
            const dot = document.createElement('div');
            dot.className = `dot ${i===0 ? 'active' : ''}`;
            dot.addEventListener('click', () => goToSlide(i));
            dotsContainer.appendChild(dot);
        }
    }

    // 核心切换逻辑 [1,6](@ref)
    function updateSlider() {
        track.style.transform = `translateX(-${currentIndex * 100}%)`;
        updateDots();
    }

    // 边界处理优化 [6,7](@ref)
    function handleBoundary() {
        if(currentIndex <= 0) {
            setTimeout(() => {
                track.style.transition = 'none';
                currentIndex = realCount;
                track.style.transform = `translateX(-${currentIndex * 100}%)`;
                void track.offsetWidth; // 强制重绘
                track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
            }, CONFIG.cloneSwitchDelay);
        }
        else if(currentIndex >= totalSlides - 1) {
            setTimeout(() => {
                track.style.transition = 'none';
                currentIndex = 1;
                track.style.transform = `translateX(-${currentIndex * 100}%)`;
                void track.offsetWidth;
                track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
            }, CONFIG.cloneSwitchDelay);
        }
    }

    // 指示点状态更新 [2](@ref)
    function updateDots() {
        const realIndex = (currentIndex - 1 + realCount) % realCount;
        document.querySelectorAll('.dot').forEach((dot, index) => {
            dot.classList.toggle('active', index === realIndex);
        });
    }

    // 导航控制 [6](@ref)
    leftBtn.addEventListener('click', () => {
        currentIndex--;
        handleBoundary();
        updateSlider();
        resetAutoPlay();
    });

    rightBtn.addEventListener('click', () => {
        currentIndex++;
        handleBoundary();
        updateSlider();
        resetAutoPlay();
    });

    // 跳转指定位置 [2,8](@ref)
    function goToSlide(index) {
        currentIndex = index + 1;
        handleBoundary();
        updateSlider();
        resetAutoPlay();
    }

    // 自动播放优化 [5,7](@ref)
    let autoTimer;
    function startAutoPlay() {
        autoTimer = setInterval(() => {
            currentIndex++;
            if(currentIndex === realCount) { // 最后真实图片延长展示
                setTimeout(() => {
                    handleBoundary();
                    updateSlider();
                }, 1000);
            } else {
                handleBoundary();
                updateSlider();
            }
        }, CONFIG.autoPlayInterval);
    }

    function resetAutoPlay() {
        clearInterval(autoTimer);
        startAutoPlay();
    }

    // 过渡结束监听 [6](@ref)
    track.addEventListener('transitionend', () => {
        if(currentIndex <= 0 || currentIndex >= totalSlides - 1) {
            handleBoundary();
        }
    });

    // 初始化执行
    createDots();
    startAutoPlay();
</script>




<script src="loginPage.js"></script>
<script src="personal.js"></script>
<script>
    const greetingsection=document.querySelector('.greeting-section')
    const main=document.querySelector('main')

    let mywork1=[]
    let current12=1
    function getMywork1(key){
        //我打算从top文章下手
        //循环发送请求,直到得到的长度为0
        let xhr=new XMLHttpRequest()
        xhr.open(
            //网址为路径参数
            'GET',
            `http://43.136.111.27:8086/article/top?current=${current12}`
        )
        xhr.send()
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&&xhr.status===200){
                let response=JSON.parse(xhr.responseText)
                let records=response.data.records
                console.log(response.data)
                if(records.length>0){
                    // 筛选符合条件的数据
                    records.forEach(item=>{
                        let xhr2=new XMLHttpRequest()
                        xhr2.open(
                            'GET',
                            `http://43.136.111.27:8086/article/detail/${item.articleId}`
                        )
                        //看其是否被删除
                        xhr2.setRequestHeader('Authorization',`${key}`)
                        xhr2.send()
                        xhr2.onreadystatechange=function(){
                            if(xhr2.readyState===4&&xhr2.status===200){
                                let detailresponse=JSON.parse(xhr2.responseText)
                                console.log("当前mywork1文章的情况是",detailresponse)
                                if(detailresponse.data.userId===userdata.userId&&detailresponse.data.isDeleted!==1){
                                    mywork1.push(detailresponse.data)
                                }
                            }
                        }
                    })
                    current12++; // 增加页码以便下一次请求
                    getMywork1(); // 继续请求下一页数据
                }
                else{
                    console.log("所有参数已经加载完成:",mywork1)
                    current12=1
                    const editorPanel5 = document.querySelector('.editor-panel5')
                    editorPanel5.innerHTML=``
                    mywork1.forEach(item=>{
                        const div = document.createElement('div')
                        div.setAttribute('articleId', item.articleId)
                        div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                    <button class="prepareUpdate">更新</button>
                </div>
            </div>
        </div>
                                    `
                        editorPanel5.appendChild(div)
                    })
                }
            }

        }
    }

    let mywork2=[]
    let current13=1
    function getMywork2(key){
        //我打算从top文章下手
        //循环发送请求,直到得到的长度为0
        let xhr=new XMLHttpRequest()
        xhr.open(
            //网址为路径参数
            'GET',
            `http://43.136.111.27:8086/article/top?current=${current13}`
        )
        xhr.send()
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&&xhr.status===200){
                let response=JSON.parse(xhr.responseText)
                let records=response.data.records
                console.log(response.data)
                if(records.length>0){
                    // 筛选符合条件的数据
                    records.forEach(item=>{
                        let xhr2=new XMLHttpRequest()
                        xhr2.open(
                            'GET',
                            `http://43.136.111.27:8086/article/detail/${item.articleId}`
                        )
                        //看其是否被删除
                        xhr2.setRequestHeader('Authorization',`${key}`)
                        xhr2.send()
                        xhr2.onreadystatechange=function(){
                            if(xhr2.readyState===4&&xhr2.status===200){
                                let detailresponse=JSON.parse(xhr2.responseText)
                                console.log("当前mywork2文章的情况是",detailresponse)
                                if(detailresponse.data.userId===userdata.userId&&detailresponse.data.isDeleted!==1){
                                    mywork2.push(detailresponse.data)
                                }
                            }
                        }
                    })
                    current13++; // 增加页码以便下一次请求
                    getMywork2(); // 继续请求下一页数据
                }
                else{
                    console.log("所有参数已经加载完成:",mywork2)
                    current13=1
                    const editorPanel5 = document.querySelector('.editor-panel5')
                    editorPanel5.innerHTML=``
                    mywork2.forEach(item=>{
                        const div = document.createElement('div')
                        div.setAttribute('articleId', item.articleId)
                        div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                    <button class="prepareDelete">删除</button>
                </div>
            </div>
        </div>
                                    `
                        editorPanel5.appendChild(div)
                    })
                }
            }

        }
    }
    /*
    *
    *
    * 评论方面还算有良心，没有分页
    *
    * */
    let current6=1
    let hiswork=[]
    function getHiswork(key,userId){
        let xhr=new XMLHttpRequest()
        xhr.open(
            'GET',
            `http://43.136.111.27:8086/article/following-articles?current=${current6}&followerId=${userId}`
        )
        xhr.setRequestHeader('Authorization',`${key}`)
        xhr.send()
        xhr.onreadystatechange=function (){
            if(xhr.readyState===4&&xhr.status===200){
                let response=JSON.parse(xhr.responseText)
                console.log(response)
                if(response.data.records.length>0){
                    response.data.records.forEach(item=>{
                        let xhr2=new XMLHttpRequest()
                        xhr2.open(
                            'GET',
                            `http://43.136.111.27:8086/article/detail/${item.articleId}`
                        )
                        //看其是否被删除
                        xhr2.setRequestHeader('Authorization',`${key}`)
                        xhr2.send()
                        xhr2.onreadystatechange=function(){
                            if(xhr2.readyState===4&&xhr2.status===200){
                                let detailresponse=JSON.parse(xhr2.responseText)
                                console.log("当前的文章情况是:",detailresponse)
                                console.log("当前的文章情况是:",detailresponse.data)
                                if(detailresponse.data.isDeleted!==1){
                                    hiswork.push(detailresponse.data)
                                }
                            }
                        }
                    })
                    current6++;
                    getHiswork(key,userId);
                }
                else{
                    console.log("所有作品已经加载完毕",hiswork)
                    current6=1
                }
            }
        }
    }

    let current7=1
    let hisFollower=[]
    function getHisFollower(key,userId){
        let xhr=new XMLHttpRequest()
        xhr.open(
            'GET',
            `http://43.136.111.27:8086/creator/following/${userId}?current=${current7}`
        )
        xhr.setRequestHeader('Authorization',`${key}`)
        xhr.send()
        xhr.onreadystatechange=function (){
            if(xhr.readyState===4&&xhr.status===200){
                let response=JSON.parse(xhr.responseText)
                if(response.data.records.length>0){
                    response.data.records.forEach(item=>{
                        hisFollower.push(item)
                    })
                    current7++;
                    getHisFollower(key,userId);
                }
                else{
                    console.log("他的所有关注者都已经渲染完成",hisFollower)
                    current7=1
                }
            }
        }
    }

    let current8=1
    let hisFans=[]
    function getHisFans(key,userId){
        let xhr=new XMLHttpRequest()
        xhr.open(
            'GET',
            `http://43.136.111.27:8086/creator/followers/${userId}?current=${current8}`
        )
        xhr.setRequestHeader('Authorization',`${key}`)
        xhr.send()
        xhr.onreadystatechange=function (){
            if(xhr.readyState===4&&xhr.status===200){
                let response=JSON.parse(xhr.responseText)
                if(response.data.records.length>0){
                    response.data.records.forEach(item=>{
                        hisFans.push(item)
                    })
                    current8++;
                    getHisFans(key,userId);
                }
                else{
                    console.log("他的所有粉丝都已经渲染完成",hisFans)
                    current8=1;
                }
            }
        }
    }

    const firstPage=document.querySelector('.firstPage')
    firstPage.addEventListener('click',function (){
        main.innerHTML=`
           <!-- 左侧分类 -->
    <div class="left-side">
        <div class="category-list">
            <button class="active">综合</button>
            <button>后端</button>
            <button>前端</button>
            <button>Android</button>
            <button>iOS</button>
            <button>人工智能</button>
            <button>工具工人</button>
            <button>代码人生</button>
            <button>阅读</button>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="tab-buttons">
            <button class="tab-button active recommendArticle">推荐</button>
            <button class="tab-button newArticle">最新</button>
            <button class="tab-button TopArticle">Top</button>
        </div>
        <div class="articleContainer2">

        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="right-side">
        <div class="right-card">
            <div class="greeting-section">
                <h3>上午好！</h3>
                <button class="signin-btn">去签到</button>
            </div>
            <div class="rank-section">
                <h4>热门文章榜</h4>
                <ul class="rank-list">

                </ul>
            </div>
            <div class="carousel">
                <div class="ctrl-arrow arrow-left"></div>
                <div class="ctrl-arrow arrow-right"></div>

                <!-- 双向克隆结构 [1,6](@ref) -->
                <div class="slider-track">
                    <!-- 克隆最后一张到开头 -->
                    <div class="slide"><img src="../image/1.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                    <!-- 原始图片 -->
                    <div class="slide"><img src="../image/2.webp" alt="图片1" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/3.webp" alt="图片2" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/1.webp" alt="图片3" style="width: 100%;height: 100%"></div>
                    <!-- 克隆第一张到末尾 -->
                    <div class="slide"><img src="../image/2.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                </div>

                <div class="indicator-dots"></div>
            </div>
        </div>
    </div>
        `
        const articleContainer2=document.querySelector('.articleContainer2')
        articleContainer2.innerHTML=``
        const rankList=document.querySelector('.rank-list')
        rankList.innerHTML=''
        recommendArticle.forEach((item,index) => {
            const div = document.createElement('div')
            div.setAttribute('articleId', item.articleId)
            div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
            articleContainer2.appendChild(div)
            const li=document.createElement('li')
            li.innerHTML=`${index+1}:${item.title}`
            rankList.appendChild(li)
        })
        // 完整交互逻辑
        document.querySelectorAll('.nav-button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.nav-button').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
            });
        });

        document.querySelectorAll('.category-list button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.category-list button').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
            });
        });

        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
            });
        });

        articleContainer2.addEventListener('click',function (event){
            if(event.target.closest('div[articleId]')){
                const articleId=event.target.closest('div[articleId]').getAttribute('articleId')
                let xhr=new XMLHttpRequest()
                xhr.open(
                    'GET',
                    `http://43.136.111.27:8086/article/detail/${articleId}`
                )
                xhr.setRequestHeader('Authorization',``)
                xhr.send()
                xhr.onreadystatechange=function (){
                    if(xhr.readyState===4&&xhr.status===200){
                        let detailresponse=JSON.parse(xhr.responseText)
                        console.log("获取到的文章详情是",detailresponse)
                        if(isLogin==0){
                            alert('当前为未登录状态，无法查看评论等文章其他信息')
                            /*
                            * 这是获取用户信息，因为不需要渲染评论，所以只用获取到个人信息和他的作品,他的粉丝，他的关注者就够了
                            * */
                            /*
                            * 失败，没有token根本查看别人的个人信息
                            *
                            * */
                            main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backFirstPage22">返回首页</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${detailresponse.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${detailresponse.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${detailresponse.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${detailresponse.data.tags}</span>
                                                                                                <span>${detailresponse.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                        }
                    }
                }
            }
        })

        // 配置参数 [5,7](@ref)
        const CONFIG = {
            autoPlayInterval: 5000,    // 自动播放间隔
            transitionDuration: 600,  // 过渡动画时间
            cloneSwitchDelay: 500      // 克隆图切换延迟
        };

        // DOM元素初始化
        const track = document.querySelector('.slider-track');
        const dotsContainer = document.querySelector('.indicator-dots');
        const [leftBtn, rightBtn] = document.querySelectorAll('.ctrl-arrow');

        let currentIndex = 1;          // 当前索引（从真实第一张开始）
        const realCount = 3;           // 真实图片数量
        const totalSlides = realCount + 2; // 包含克隆图总数

        // 初始化指示点 [2,8](@ref)
        function createDots() {
            for(let i=0; i<realCount; i++) {
                const dot = document.createElement('div');
                dot.className = `dot ${i===0 ? 'active' : ''}`;
                dot.addEventListener('click', () => goToSlide(i));
                dotsContainer.appendChild(dot);
            }
        }

        // 核心切换逻辑 [1,6](@ref)
        function updateSlider() {
            track.style.transform = `translateX(-${currentIndex * 100}%)`;
            updateDots();
        }

        // 边界处理优化 [6,7](@ref)
        function handleBoundary() {
            if(currentIndex <= 0) {
                setTimeout(() => {
                    track.style.transition = 'none';
                    currentIndex = realCount;
                    track.style.transform = `translateX(-${currentIndex * 100}%)`;
                    void track.offsetWidth; // 强制重绘
                    track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
                }, CONFIG.cloneSwitchDelay);
            }
            else if(currentIndex >= totalSlides - 1) {
                setTimeout(() => {
                    track.style.transition = 'none';
                    currentIndex = 1;
                    track.style.transform = `translateX(-${currentIndex * 100}%)`;
                    void track.offsetWidth;
                    track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
                }, CONFIG.cloneSwitchDelay);
            }
        }

        // 指示点状态更新 [2](@ref)
        function updateDots() {
            const realIndex = (currentIndex - 1 + realCount) % realCount;
            document.querySelectorAll('.dot').forEach((dot, index) => {
                dot.classList.toggle('active', index === realIndex);
            });
        }

        // 导航控制 [6](@ref)
        leftBtn.addEventListener('click', () => {
            currentIndex--;
            handleBoundary();
            updateSlider();
            resetAutoPlay();
        });

        rightBtn.addEventListener('click', () => {
            currentIndex++;
            handleBoundary();
            updateSlider();
            resetAutoPlay();
        });

        // 跳转指定位置 [2,8](@ref)
        function goToSlide(index) {
            currentIndex = index + 1;
            handleBoundary();
            updateSlider();
            resetAutoPlay();
        }

        // 自动播放优化 [5,7](@ref)
        let autoTimer;
        function startAutoPlay() {
            autoTimer = setInterval(() => {
                currentIndex++;
                if(currentIndex === realCount) { // 最后真实图片延长展示
                    setTimeout(() => {
                        handleBoundary();
                        updateSlider();
                    }, 500);
                } else {
                    handleBoundary();
                    updateSlider();
                }
            }, CONFIG.autoPlayInterval);
        }

        function resetAutoPlay() {
            clearInterval(autoTimer);
            startAutoPlay();
        }

        // 过渡结束监听 [6](@ref)
        track.addEventListener('transitionend', () => {
            if(currentIndex <= 0 || currentIndex >= totalSlides - 1) {
                handleBoundary();
            }
        });

        // 初始化执行
        createDots();
        startAutoPlay();

    })

    let current9=1
    let recommendArticle=[]
    function getRecommendArticle(){
        let xhr = new XMLHttpRequest();
        xhr.open(
            'GET',
            `http://43.136.111.27:8086/article/category-articles?category=recommend&current=${current9}`,
        )
        xhr.send()
        xhr.onreadystatechange=function (){
            if(xhr.readyState===4&&xhr.status===200){
                let response = JSON.parse(xhr.responseText)
                console.log(response)
                if(response.data.records.length>0){
                    response.data.records.forEach(item => {
                        let xhr2=new XMLHttpRequest()
                        xhr2.open(
                            'GET',
                            `http://43.136.111.27:8086/article/detail/${item.articleId}`
                        )
                        xhr2.setRequestHeader('Authorization',`Bearer ${response.data.token}`)
                        xhr2.send()
                        xhr2.onreadystatechange=function (){
                            if(xhr2.readyState===4&&xhr2.status===200){
                                let detailresponse=JSON.parse(xhr2.responseText)
                                if(detailresponse.data.isDeleted!==1){
                                    recommendArticle.push(detailresponse.data)
                                }
                            }
                        }

                    })
                    current9++
                    getRecommendArticle()
                }
                else{
                    current9=1
                    console.log("所有推荐文章已加载完成",recommendArticle)
                    const articleContainer2=document.querySelector('.articleContainer2')
                    articleContainer2.innerHTML=``
                    const rankList=document.querySelector('.rank-list')
                    rankList.innerHTML=''
                    recommendArticle.forEach((item,index) => {
                        const div = document.createElement('div')
                        div.setAttribute('articleId', item.articleId)
                        div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${index+1}:${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                        articleContainer2.appendChild(div)
                        const li=document.createElement('li')
                        li.innerHTML=`${index+1}:${item.title}`
                        rankList.appendChild(li)
                    })
                }
            }
        }
    }

    getRecommendArticle()

    let current10=1
    let newArticle=[]
    function getNewArticle(){
        let xhr = new XMLHttpRequest();
        xhr.open(
            'GET',
            `http://43.136.111.27:8086/article/category-articles?category=new&current=${current10}`,
        )
        xhr.send()
        xhr.onreadystatechange=function (){
            if(xhr.readyState===4&&xhr.status===200){
                let response = JSON.parse(xhr.responseText)
                if(response.data.records.length>0){
                    response.data.records.forEach(item => {
                        let xhr2=new XMLHttpRequest()
                        xhr2.open(
                            'GET',
                            `http://43.136.111.27:8086/article/detail/${item.articleId}`
                        )
                        xhr2.setRequestHeader('Authorization',`Bearer ${response.data.token}`)
                        xhr2.send()
                        xhr2.onreadystatechange=function (){
                            if(xhr2.readyState===4&&xhr2.status===200){
                                let detailresponse=JSON.parse(xhr2.responseText)
                                if(detailresponse.data.isDeleted!==1){
                                    newArticle.push(detailresponse.data)
                                }
                            }
                        }

                    })
                    current10++
                    getNewArticle()
                }
                else{
                    current10=1
                    console.log("最新文章的情况为",newArticle)
                    const articleContainer2=document.querySelector('.articleContainer2')
                    articleContainer2.innerHTML=``
                    newArticle.forEach(item => {
                        const div = document.createElement('div')
                        div.setAttribute('articleId', item.articleId)
                        div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                        articleContainer2.appendChild(div)
                    })
                }
            }
        }
    }


    let current11=1
    let topArticle=[]
    function getTopArticle(){
        let xhr = new XMLHttpRequest();
        xhr.open(
            'GET',
            `http://43.136.111.27:8086/article/top?current=${current11}`
        )
        xhr.send()
        xhr.onreadystatechange=function (){
            if(xhr.readyState===4&&xhr.status===200){
                let response = JSON.parse(xhr.responseText)
                if(response.data.records.length>0){
                    response.data.records.forEach(item => {
                        let xhr2=new XMLHttpRequest()
                        xhr2.open(
                            'GET',
                            `http://43.136.111.27:8086/article/detail/${item.articleId}`
                        )
                        xhr2.setRequestHeader('Authorization',`Bearer ${response.data.token}`)
                        xhr2.send()
                        xhr2.onreadystatechange=function (){
                            if(xhr2.readyState===4&&xhr2.status===200){
                                let detailresponse=JSON.parse(xhr2.responseText)
                                if(detailresponse.data.isDeleted!==1){
                                    topArticle.push(detailresponse.data)
                                }
                            }
                        }
                    })
                    current11++
                    getTopArticle()
                }
                else{
                    current11=1
                    console.log("当前的top文章数组已经加载完毕",topArticle)
                    const articleContainer2=document.querySelector('.articleContainer2')
                    articleContainer2.innerHTML=``
                    topArticle.forEach(item => {
                        const div = document.createElement('div')
                        div.setAttribute('articleId', item.articleId)
                        div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                        articleContainer2.appendChild(div)
                    })
                }
            }
        }
    }


    document.addEventListener('click',function (event1){
        if(event1.target.closest('.recommendArticle')){
            recommendArticle=[]
            getRecommendArticle()
        }
        if(event1.target.closest('.newArticle')){
            newArticle=[]
            getNewArticle()
        }
        if(event1.target.closest('.TopArticle')){
            topArticle=[]
            getTopArticle()
        }
        if(event1.target.closest('.backFirstPage22')){
            main.innerHTML=`
           <!-- 左侧分类 -->
    <div class="left-side">
        <div class="category-list">
            <button class="active">综合</button>
            <button>后端</button>
            <button>前端</button>
            <button>Android</button>
            <button>iOS</button>
            <button>人工智能</button>
            <button>工具工人</button>
            <button>代码人生</button>
            <button>阅读</button>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="tab-buttons">
            <button class="tab-button active recommendArticle">推荐</button>
            <button class="tab-button newArticle">最新</button>
            <button class="tab-button TopArticle">Top</button>
        </div>
        <div class="articleContainer2">

        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="right-side">
        <div class="right-card">
            <div class="greeting-section">
                <h3>上午好！</h3>
                <button class="signin-btn">去签到</button>
            </div>
            <div class="rank-section">
                <h4>热门文章榜</h4>
                <ul class="rank-list">

                </ul>
            </div>
            <div class="carousel">
                <div class="ctrl-arrow arrow-left"></div>
                <div class="ctrl-arrow arrow-right"></div>

                <!-- 双向克隆结构 [1,6](@ref) -->
                <div class="slider-track">
                    <!-- 克隆最后一张到开头 -->
                    <div class="slide"><img src="../image/1.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                    <!-- 原始图片 -->
                    <div class="slide"><img src="../image/2.webp" alt="图片1" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/3.webp" alt="图片2" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/1.webp" alt="图片3" style="width: 100%;height: 100%"></div>
                    <!-- 克隆第一张到末尾 -->
                    <div class="slide"><img src="../image/2.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                </div>

                <div class="indicator-dots"></div>
            </div>
        </div>
    </div>
        `
            const articleContainer2=document.querySelector('.articleContainer2')
            articleContainer2.innerHTML=``
            const rankList=document.querySelector('.rank-list')
            rankList.innerHTML=''
            recommendArticle.forEach((item,index) => {
                const div = document.createElement('div')
                div.setAttribute('articleId', item.articleId)
                div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${index+1}:${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                articleContainer2.appendChild(div)
                const li=document.createElement('li')
                li.innerHTML=`${index+1}:${item.title}`
                rankList.appendChild(li)
            })
            // 完整交互逻辑
            document.querySelectorAll('.nav-button').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.nav-button').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            document.querySelectorAll('.category-list button').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.category-list button').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            document.querySelectorAll('.tab-button').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 配置参数 [5,7](@ref)
            const CONFIG = {
                autoPlayInterval: 5000,    // 自动播放间隔
                transitionDuration: 600,  // 过渡动画时间
                cloneSwitchDelay: 500      // 克隆图切换延迟
            };

            // DOM元素初始化
            const track = document.querySelector('.slider-track');
            const dotsContainer = document.querySelector('.indicator-dots');
            const [leftBtn, rightBtn] = document.querySelectorAll('.ctrl-arrow');

            let currentIndex = 1;          // 当前索引（从真实第一张开始）
            const realCount = 3;           // 真实图片数量
            const totalSlides = realCount + 2; // 包含克隆图总数

            // 初始化指示点 [2,8](@ref)
            function createDots() {
                for(let i=0; i<realCount; i++) {
                    const dot = document.createElement('div');
                    dot.className = `dot ${i===0 ? 'active' : ''}`;
                    dot.addEventListener('click', () => goToSlide(i));
                    dotsContainer.appendChild(dot);
                }
            }

            // 核心切换逻辑 [1,6](@ref)
            function updateSlider() {
                track.style.transform = `translateX(-${currentIndex * 100}%)`;
                updateDots();
            }

            // 边界处理优化 [6,7](@ref)
            function handleBoundary() {
                if(currentIndex <= 0) {
                    setTimeout(() => {
                        track.style.transition = 'none';
                        currentIndex = realCount;
                        track.style.transform = `translateX(-${currentIndex * 100}%)`;
                        void track.offsetWidth; // 强制重绘
                        track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
                    }, CONFIG.cloneSwitchDelay);
                }
                else if(currentIndex >= totalSlides - 1) {
                    setTimeout(() => {
                        track.style.transition = 'none';
                        currentIndex = 1;
                        track.style.transform = `translateX(-${currentIndex * 100}%)`;
                        void track.offsetWidth;
                        track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
                    }, CONFIG.cloneSwitchDelay);
                }
            }

            // 指示点状态更新 [2](@ref)
            function updateDots() {
                const realIndex = (currentIndex - 1 + realCount) % realCount;
                document.querySelectorAll('.dot').forEach((dot, index) => {
                    dot.classList.toggle('active', index === realIndex);
                });
            }

            // 导航控制 [6](@ref)
            leftBtn.addEventListener('click', () => {
                currentIndex--;
                handleBoundary();
                updateSlider();
                resetAutoPlay();
            });

            rightBtn.addEventListener('click', () => {
                currentIndex++;
                handleBoundary();
                updateSlider();
                resetAutoPlay();
            });

            // 跳转指定位置 [2,8](@ref)
            function goToSlide(index) {
                currentIndex = index + 1;
                handleBoundary();
                updateSlider();
                resetAutoPlay();
            }

            // 自动播放优化 [5,7](@ref)
            let autoTimer;
            function startAutoPlay() {
                autoTimer = setInterval(() => {
                    currentIndex++;
                    if(currentIndex === realCount) { // 最后真实图片延长展示
                        setTimeout(() => {
                            handleBoundary();
                            updateSlider();
                        }, 1000);
                    } else {
                        handleBoundary();
                        updateSlider();
                    }
                }, CONFIG.autoPlayInterval);
            }

            function resetAutoPlay() {
                clearInterval(autoTimer);
                startAutoPlay();
            }

            // 过渡结束监听 [6](@ref)
            track.addEventListener('transitionend', () => {
                if(currentIndex <= 0 || currentIndex >= totalSlides - 1) {
                    handleBoundary();
                }
            });

            // 初始化执行
            createDots();
            startAutoPlay();

            articleContainer2.addEventListener('click',function (event){
                if(event.target.closest('div[articleId]')){
                    const articleId=event.target.closest('div[articleId]').getAttribute('articleId')
                    let xhr=new XMLHttpRequest()
                    xhr.open(
                        'GET',
                        `http://43.136.111.27:8086/article/detail/${articleId}`
                    )
                    xhr.setRequestHeader('Authorization',``)
                    xhr.send()
                    xhr.onreadystatechange=function (){
                        if(xhr.readyState===4&&xhr.status===200){
                            let detailresponse=JSON.parse(xhr.responseText)
                            console.log("获取到的文章详情是",detailresponse)
                            if(isLogin==0){
                                alert('当前为未登录状态，无法查看评论等文章其他信息')
                                /*
                                * 这是获取用户信息，因为不需要渲染评论，所以只用获取到个人信息和他的作品,他的粉丝，他的关注者就够了
                                * */
                                /*
                                * 失败，没有token根本查看别人的个人信息
                                *
                                * */
                                main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backFirstPage22">返回首页</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${detailresponse.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${detailresponse.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${detailresponse.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${detailresponse.data.tags}</span>
                                                                                                <span>${detailresponse.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                            }
                            if(isLogin==1){
                                alert('你已经登录')
                                /*
                                * 这是获取用户信息，因为不需要渲染评论，所以只用获取到个人信息和他的作品,他的粉丝，他的关注者就够了
                                * */
                                /*
                                * 失败，没有token根本查看别人的个人信息
                                *
                                * */
                                let xhr2=new XMLHttpRequest()
                                xhr2.open(
                                    'GET',
                                    `http://43.136.111.27:8086/creator/profile/${detailresponse.data.userId}`
                                )
                                xhr2.setRequestHeader('Authorization',`${userkey}`)
                                xhr2.send()
                                xhr2.onreadystatechange=function (){
                                    if(xhr2.readyState===4&&xhr2.status===200){
                                        let response2=JSON.parse(xhr2.responseText)
                                        console.log("获取到的用户信息是:",response2)
                                        let xhr3=new XMLHttpRequest()
                                        xhr3.open(
                                            'GET',
                                            `http://43.136.111.27:8086/creator/following/${detailresponse.data.userId}`
                                        )
                                        xhr3.setRequestHeader('Authorization',`${userkey}`)
                                        xhr3.send()
                                        xhr3.onreadystatechange=function (){
                                            if(xhr3.readyState===4&&xhr3.status===200){
                                                let response3=JSON.parse(xhr3.responseText)
                                                console.log("当前创作者的关注信息是:",response3)
                                                let xhr4=new XMLHttpRequest()
                                                xhr4.open(
                                                    'GET',
                                                    `http://43.136.111.27:8086/creator/followers/${detailresponse.data.userId}`
                                                )
                                                xhr4.setRequestHeader('Authorization',`${userkey}`)
                                                xhr4.send()
                                                xhr4.onreadystatechange=function (){
                                                    if(xhr4.readyState===4&&xhr4.status===200){
                                                        let response4=JSON.parse(xhr4.responseText)
                                                        console.log("当前创作者的粉丝是:",response4)
                                                        let xhr5=new XMLHttpRequest()
                                                        xhr5.open(
                                                            'GET',
                                                            `http://43.136.111.27:8086/article/following-articles?followerId=${detailresponse.data.userId}`
                                                        )
                                                        xhr5.setRequestHeader('Authorization',`${userkey}`)
                                                        xhr5.send()
                                                        xhr5.onreadystatechange=function (){
                                                            if(xhr5.readyState===4&&xhr5.status===200){
                                                                let response5=JSON.parse(xhr5.responseText)
                                                                console.log("当前他的作品为:",response5)
                                                                let xhr6=new XMLHttpRequest()
                                                                xhr6.open(
                                                                    'GET',
                                                                    `http://43.136.111.27:8086/article/comment/list/${articleId}`
                                                                )
                                                                xhr6.setRequestHeader('Authorization',`${userkey}`)
                                                                xhr6.send()
                                                                xhr6.onreadystatechange=function (){
                                                                    if(xhr6.readyState===4&&xhr6.status===200){
                                                                        let response6=JSON.parse(xhr6.responseText)
                                                                        console.log("当前的评论为",response6)
                                                                        main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backFirstPage22">返回首页</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${detailresponse.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>

                                                                                        <!-- 评论 -->
                                                                                        <div class="action-item" style="color:#1E80FF">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-3 12H7v-2h10v2zm0-3H7V9h10v2zm0-3H7V6h10v2z"/>
                                                                                            </svg>
                                                                                            <div class="count">评论数:${response6.data.length}</div>

                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${detailresponse.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${detailresponse.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${detailresponse.data.tags}</span>
                                                                                                <span>${detailresponse.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="CommentContainer">
                                                                                            <div class="createComment">
                                                                                                <h6>来发布你的评论吧</h6>
                                                                                                <div><input type="text" class="nullContent" placeholder="请输入文本"></div>
                                                                                                <div><input type="text" class="nullimageUrl" placeholder="请输入图片网址"></div>
                                                                                                <div><button class="submitnull">发布</button></div>
                                                                                            </div>
                                                                                            <div class="createBackComment" style="display: none">
                                                                                                <h6>来发布你的回复吧</h6>
                                                                                                <div><input type="text" class="parContent" placeholder="请输入回复文本"></div>
                                                                                                <div><input type="text" class="parimageUrl" placeholder="请输入回复图片网址"></div>
                                                                                                <div><button class="submitpar">发布</button></div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 右侧用户信息 -->
                                                                                    <div class="user-sidebar">
                                                                                        <div class="user-card">
                                                                                            <div class="user-header"> <!-- 新增flex容器 -->
                                                                                                <img src="${response2.data.avatar}" class="user-avatar" style="width:60px;height:60px">
                                                                                                <div class="user-info">
                                                                                                    <h3>${response2.data.username}</h3>
                                                                                                    <p class="position">${response2.data.profession}</p>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="stats">
                                                                                                <div>
                                                                                                    <div class="number">${response5.data.records.length}</div>
                                                                                                    <div class="label">文章</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response3.data.records.length}</div>
                                                                                                    <div class="label">关注</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response4.data.records.length}</div>
                                                                                                    <div class="label">粉丝</div>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="actions isFollow">
                                                                                                <button class="follow-btn prepareFollowing">关注</button>
                                                                                                <button class="message-btn">私信</button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                                                                        const isFollow=document.querySelector('.isFollow')
                                                                        let followStatus=followingArray.some(user=>user.userId===detailresponse.data.userId)
                                                                        if(followStatus){
                                                                            isFollow.innerHTML=`
                                                                                                        <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                        <button class="message-btn">私信</button>
                                                                                                    `
                                                                        }

                                                                        isFollow.addEventListener('click',function (e){
                                                                            if(e.target.closest('.deleteFollowing')){
                                                                                isFollow.innerHTML=`
                                                                                                            <button class="follow-btn prepareFollowing">关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                followingArray = followingArray.filter(user => String(user.userId) !== String(detailresponse.data.userId));
                                                                                console.log("当前的关注者数组是",followingArray)
                                                                                /*
                                                                                *
                                                                                * 在这里写请求就行
                                                                                *
                                                                                * */
                                                                                const data={
                                                                                    userId:detailresponse.data.userId
                                                                                }
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/user/unfollow`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                                xhr.setRequestHeader('Content-Type','application/json')
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log(xhr.response)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e.target.closest('.prepareFollowing')){
                                                                                isFollow.innerHTML=`
                                                                                                            <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                followingArray.push(response2.data)
                                                                                console.log("当前的关注者数组是",followingArray)
                                                                                const data={
                                                                                    userId:response2.data.userId
                                                                                }

                                                                                /*
                                                                                * 在这里写请求就行
                                                                                *
                                                                                * */
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/user/follow`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                                xhr.setRequestHeader('Content-Type','application/json')
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log(xhr.response)
                                                                                    }
                                                                                }

                                                                            }
                                                                        })

                                                                        const collectitem= document.querySelector('.collectitem')
                                                                        let collectstatus=collectArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                        if(collectstatus){
                                                                            collectitem.innerHTML=`
                                                                                                        <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                            <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                        </svg>
                                                                                                        <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                                        <div class="count deleteCollect">(已收藏)</div>
                                                                                                    `
                                                                        }
                                                                        let currentcollect=detailresponse.data.collectCount
                                                                        collectitem.addEventListener('click',function (e){

                                                                            if(e.target.closest('.deleteCollect')){
                                                                                currentcollect--
                                                                                collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                                        `
                                                                                collectArray=collectArray.filter(article=>String(article.articleId)!==String(detailresponse.data.articleId))
                                                                                console.log("当前的收藏数组为",collectArray)
                                                                                /*
                                                                                *
                                                                                * 这里写取消关注按钮
                                                                                *
                                                                                * */
                                                                                let xhr= new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/uncollect/${detailresponse.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("取消收藏的情况为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }
                                                                            if(e.target.closest('.prepareCollect')){
                                                                                currentcollect++
                                                                                collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count deleteCollect">(已收藏)</div>
                                                                                                        `
                                                                                collectArray.push(detailresponse.data)
                                                                                console.log("当前的收藏数组是",collectArray)
                                                                                /*
                                                                                * 这里写收藏按钮
                                                                                *
                                                                                * */
                                                                                let xhr= new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/collect/${detailresponse.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("收藏的情况为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }
                                                                        })


                                                                        const gooditem= document.querySelector('.gooditem')
                                                                        let goodstatus=likeArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                        if(goodstatus){
                                                                            gooditem.innerHTML=`
                                                                                                       <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                       </svg>
                                                                                                       <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                                       <div class="count deletegood">(取消点赞)</div>
                                                                                                    `
                                                                        }
                                                                        let currentgood=detailresponse.data.likeCount
                                                                        gooditem.addEventListener('click',function (e){
                                                                            if(e.target.closest('.deletegood')){
                                                                                currentgood--
                                                                                gooditem.innerHTML=`
                                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">点赞数:${currentgood}</div>
                                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                                        `
                                                                                likeArray=likeArray.filter(article => String(article.articleId)!==String(detailresponse.data.articleId))
                                                                                console.log("当前的喜欢文章数组是",likeArray)
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/unlike/${detailresponse.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("取消点赞为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e.target.closest('.preparegood')){
                                                                                currentgood++
                                                                                gooditem.innerHTML=`
                                                                                                           <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                    <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                           </svg>
                                                                                                           <div class="count">点赞数:${currentgood}</div>
                                                                                                           <div class="count deletegood">(取消点赞)</div>
                                                                                                        `
                                                                                likeArray.push(detailresponse.data)
                                                                                console.log("当前的喜欢文章数组是",likeArray)
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/like/${detailresponse.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("点赞情况为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }
                                                                        })

                                                                        console.log("当前的评论为:",response6)
                                                                        const commentContainer=document.querySelector('.CommentContainer')
                                                                        response6.data.forEach(item => {
                                                                            //判断这个文章的父亲id为0同时这个评论的
                                                                            console.log("这个评论是",item)
                                                                            let xhr = new XMLHttpRequest();
                                                                            xhr.open(
                                                                                'GET',
                                                                                `http://43.136.111.27:8086/creator/profile/${item.commentUser}`
                                                                            )
                                                                            xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                            xhr.send()
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    let response14=JSON.parse(xhr.responseText)
                                                                                    console.log("当前评论的用户信息是",response14.data)
                                                                                    if(item.parentId==null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        console.log("当前的这个评论div是",div)
                                                                                        commentContainer.appendChild(div)
                                                                                    }
                                                                                    if(item.parentId==null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        console.log("当前的这个评论div是",div)
                                                                                        commentContainer.appendChild(div)
                                                                                    }
                                                                                    if(item.parentId!=null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                        console.log("这个孩子评论为:",div)
                                                                                        console.log("选中的父亲id是",item.parentId)
                                                                                        console.log("选中的父亲元素是",parentdiv)
                                                                                        const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                        childrenComment.appendChild(div)
                                                                                    }
                                                                                    if(item.parentId!=null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                        console.log("选中的父亲元素是",parentdiv)
                                                                                        const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                        childrenComment.appendChild(div)
                                                                                    }
                                                                                }
                                                                            }

                                                                        })

                                                                        let parentId=null
                                                                        commentContainer.addEventListener('click',function (e1){
                                                                            if(e1.target.closest('.backComment1')){
                                                                                alert('回复评论被点击')
                                                                                const div=e1.target.closest('div[commentId]')
                                                                                parentId=div.getAttribute('commentId')
                                                                                console.log("当前回复的父亲id是:",parentId)
                                                                                const createBackComment=document.querySelector('.createBackComment')
                                                                                createBackComment.style.display='block'
                                                                            }

                                                                            if(e1.target.closest('.submitpar')){
                                                                                alert('提交回复被点击')
                                                                                const parContent=document.querySelector('.parContent').value
                                                                                const parimageUrl=document.querySelector('.parimageUrl').value
                                                                                const data={
                                                                                    articleId:detailresponse.data.articleId,
                                                                                    content:parContent,
                                                                                    imageUrl:parimageUrl,
                                                                                    parentId:parentId,
                                                                                }
                                                                                console.log("当前发送的数据是:",data)
                                                                                // 清空输入框并隐藏
                                                                                document.querySelector('.parContent').value = '';
                                                                                document.querySelector('.parimageUrl').value = '';
                                                                                document.querySelector('.createBackComment').style.display = 'none';
                                                                                //在这里服务器确实返回了commentId
                                                                                let xhr = new XMLHttpRequest()
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/comment/add`
                                                                                )
                                                                                xhr.setRequestHeader('Content-Type', 'application/json')
                                                                                xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        let response16=JSON.parse(xhr.responseText)
                                                                                        console.log("发送评论情况为:",response16)
                                                                                        // 获取当前时间并格式化
                                                                                        const formatTime = () => {
                                                                                            const now = new Date();
                                                                                            const year = now.getFullYear();
                                                                                            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                            const day = String(now.getDate()).padStart(2, '0');
                                                                                            const hours = String(now.getHours()).padStart(2, '0');
                                                                                            const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                            const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                        };
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        const parentdiv=document.querySelector(`.commentItem[commentId="${data.parentId}"]`)
                                                                                        console.log("这个孩子评论为:",div)
                                                                                        console.log("选中的父亲id是",data.parentId)
                                                                                        console.log("选中的父亲元素是",parentdiv)
                                                                                        const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                        childrenComment.appendChild(div)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e1.target.closest('.deleteComment')){
                                                                                alert('删除按钮被点击')
                                                                                const div=e1.target.closest('.commentItem[commentId]')
                                                                                //这里是选父亲元素
                                                                                commentId=div.getAttribute('commentId')
                                                                                console.log("当前删除的最近元素id是:",commentId)
                                                                                div.remove()
                                                                                let xhr = new XMLHttpRequest()
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/comment/delete/${commentId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("删除情况为:",xhr.responseText)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e1.target.closest('.submitnull')){
                                                                                alert('提交评论被点击')
                                                                                const nullContent=document.querySelector('.nullContent').value
                                                                                const nullimageUrl=document.querySelector('.nullimageUrl').value
                                                                                const data={
                                                                                    articleId:detailresponse.data.articleId,
                                                                                    content:nullContent,
                                                                                    imageUrl:nullimageUrl,
                                                                                    parentId:null
                                                                                }
                                                                                console.log("上传的null数据是",data)
                                                                                let xhr = new XMLHttpRequest()
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/comment/add`
                                                                                )
                                                                                xhr.setRequestHeader('Content-Type', 'application/json')
                                                                                xhr.setRequestHeader('Authorization',`${userkey}`)
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        let response16=JSON.parse(xhr.responseText)
                                                                                        console.log("发送null评论情况为:",response16)
                                                                                        const formatTime = () => {
                                                                                            const now = new Date();
                                                                                            const year = now.getFullYear();
                                                                                            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                            const day = String(now.getDate()).padStart(2, '0');
                                                                                            const hours = String(now.getHours()).padStart(2, '0');
                                                                                            const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                            const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                        };
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        commentContainer.appendChild(div)
                                                                                    }
                                                                                }
                                                                            }
                                                                        })

                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            })
        }
    })

    const articleContainer2=document.querySelector('.articleContainer2')
    articleContainer2.addEventListener('click',function (event){
        if(event.target.closest('div[articleId]')){
            const articleId=event.target.closest('div[articleId]').getAttribute('articleId')
            let xhr=new XMLHttpRequest()
            xhr.open(
                'GET',
                `http://43.136.111.27:8086/article/detail/${articleId}`
            )
            xhr.setRequestHeader('Authorization',``)
            xhr.send()
            xhr.onreadystatechange=function (){
                if(xhr.readyState===4&&xhr.status===200){
                    let detailresponse=JSON.parse(xhr.responseText)
                    console.log("获取到的文章详情是",detailresponse)
                    if(isLogin==0){
                        alert('当前为未登录状态，无法查看评论等文章其他信息')
                        /*
                        * 这是获取用户信息，因为不需要渲染评论，所以只用获取到个人信息和他的作品,他的粉丝，他的关注者就够了
                        * */
                        /*
                        * 失败，没有token根本查看别人的个人信息
                        *
                        * */
                        main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backFirstPage22">返回首页</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${detailresponse.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${detailresponse.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${detailresponse.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${detailresponse.data.tags}</span>
                                                                                                <span>${detailresponse.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                    }
                }
            }
        }
    })
</script>

<script>

    document.addEventListener('LoginSuccess', function (event) {
        let key = event.detail;
        isLogin=1
        console.log("接受到的key为",key)
        Getuserinfo(key)
        articleContainer2.addEventListener('click',function (event){


            if(event.target.closest('div[articleId]')){
                const articleId=event.target.closest('div[articleId]').getAttribute('articleId')
                let xhr=new XMLHttpRequest()
                xhr.open(
                    'GET',
                    `http://43.136.111.27:8086/article/detail/${articleId}`
                )
                xhr.setRequestHeader('Authorization',``)
                xhr.send()
                xhr.onreadystatechange=function (){
                    if(xhr.readyState===4&&xhr.status===200){
                        let detailresponse=JSON.parse(xhr.responseText)
                        console.log("获取到的文章详情是",detailresponse)
                        if(isLogin==1){
                            alert('你已经登录')
                            /*
                            * 这是获取用户信息，因为不需要渲染评论，所以只用获取到个人信息和他的作品,他的粉丝，他的关注者就够了
                            * */
                            /*
                            * 失败，没有token根本查看别人的个人信息
                            *
                            * */
                            let xhr2=new XMLHttpRequest()
                            xhr2.open(
                                'GET',
                                `http://43.136.111.27:8086/creator/profile/${detailresponse.data.userId}`
                            )
                            xhr2.setRequestHeader('Authorization',`${key}`)
                            xhr2.send()
                            xhr2.onreadystatechange=function (){
                                if(xhr2.readyState===4&&xhr2.status===200){
                                    let response2=JSON.parse(xhr2.responseText)
                                    console.log("获取到的用户信息是:",response2)
                                    let xhr3=new XMLHttpRequest()
                                    xhr3.open(
                                        'GET',
                                        `http://43.136.111.27:8086/creator/following/${detailresponse.data.userId}`
                                    )
                                    xhr3.setRequestHeader('Authorization',`${key}`)
                                    xhr3.send()
                                    xhr3.onreadystatechange=function (){
                                        if(xhr3.readyState===4&&xhr3.status===200){
                                            let response3=JSON.parse(xhr3.responseText)
                                            console.log("当前创作者的关注信息是:",response3)
                                            let xhr4=new XMLHttpRequest()
                                            xhr4.open(
                                                'GET',
                                                `http://43.136.111.27:8086/creator/followers/${detailresponse.data.userId}`
                                            )
                                            xhr4.setRequestHeader('Authorization',`${key}`)
                                            xhr4.send()
                                            xhr4.onreadystatechange=function (){
                                                if(xhr4.readyState===4&&xhr4.status===200){
                                                    let response4=JSON.parse(xhr4.responseText)
                                                    console.log("当前创作者的粉丝是:",response4)
                                                    let xhr5=new XMLHttpRequest()
                                                    xhr5.open(
                                                        'GET',
                                                        `http://43.136.111.27:8086/article/following-articles?followerId=${detailresponse.data.userId}`
                                                    )
                                                    xhr5.setRequestHeader('Authorization',`${key}`)
                                                    xhr5.send()
                                                    xhr5.onreadystatechange=function (){
                                                        if(xhr5.readyState===4&&xhr5.status===200){
                                                            let response5=JSON.parse(xhr5.responseText)
                                                            console.log("当前他的作品为:",response5)
                                                            let xhr6=new XMLHttpRequest()
                                                            xhr6.open(
                                                                'GET',
                                                                `http://43.136.111.27:8086/article/comment/list/${articleId}`
                                                            )
                                                            xhr6.setRequestHeader('Authorization',`${key}`)
                                                            xhr6.send()
                                                            xhr6.onreadystatechange=function (){
                                                                if(xhr6.readyState===4&&xhr6.status===200){
                                                                    let response6=JSON.parse(xhr6.responseText)
                                                                    console.log("当前的评论为",response6)
                                                                    main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backFirstPage22">返回首页</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${detailresponse.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>

                                                                                        <!-- 评论 -->
                                                                                        <div class="action-item" style="color:#1E80FF">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-3 12H7v-2h10v2zm0-3H7V9h10v2zm0-3H7V6h10v2z"/>
                                                                                            </svg>
                                                                                            <div class="count">评论数:${response6.data.length}</div>

                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${detailresponse.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${detailresponse.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${detailresponse.data.tags}</span>
                                                                                                <span>${detailresponse.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="CommentContainer">
                                                                                            <div class="createComment">
                                                                                                <h6>来发布你的评论吧</h6>
                                                                                                <div><input type="text" class="nullContent" placeholder="请输入文本"></div>
                                                                                                <div><input type="text" class="nullimageUrl" placeholder="请输入图片网址"></div>
                                                                                                <div><button class="submitnull">发布</button></div>
                                                                                            </div>
                                                                                            <div class="createBackComment" style="display: none">
                                                                                                <h6>来发布你的回复吧</h6>
                                                                                                <div><input type="text" class="parContent" placeholder="请输入回复文本"></div>
                                                                                                <div><input type="text" class="parimageUrl" placeholder="请输入回复图片网址"></div>
                                                                                                <div><button class="submitpar">发布</button></div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 右侧用户信息 -->
                                                                                    <div class="user-sidebar">
                                                                                        <div class="user-card">
                                                                                            <div class="user-header"> <!-- 新增flex容器 -->
                                                                                                <img src="${response2.data.avatar}" class="user-avatar" style="width:60px;height:60px">
                                                                                                <div class="user-info">
                                                                                                    <h3>${response2.data.username}</h3>
                                                                                                    <p class="position">${response2.data.profession}</p>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="stats">
                                                                                                <div>
                                                                                                    <div class="number">${response5.data.records.length}</div>
                                                                                                    <div class="label">文章</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response3.data.records.length}</div>
                                                                                                    <div class="label">关注</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response4.data.records.length}</div>
                                                                                                    <div class="label">粉丝</div>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="actions isFollow">
                                                                                                <button class="follow-btn prepareFollowing">关注</button>
                                                                                                <button class="message-btn">私信</button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                                                                    const isFollow=document.querySelector('.isFollow')
                                                                    let followStatus=followingArray.some(user=>user.userId===detailresponse.data.userId)
                                                                    if(followStatus){
                                                                        isFollow.innerHTML=`
                                                                                                        <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                        <button class="message-btn">私信</button>
                                                                                                    `
                                                                    }

                                                                    isFollow.addEventListener('click',function (e){
                                                                        if(e.target.closest('.deleteFollowing')){
                                                                            isFollow.innerHTML=`
                                                                                                            <button class="follow-btn prepareFollowing">关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                            followingArray = followingArray.filter(user => String(user.userId) !== String(detailresponse.data.userId));
                                                                            console.log("当前的关注者数组是",followingArray)
                                                                            /*
                                                                            *
                                                                            * 在这里写请求就行
                                                                            *
                                                                            * */
                                                                            const data={
                                                                                userId:detailresponse.data.userId
                                                                            }
                                                                            let xhr = new XMLHttpRequest();
                                                                            xhr.open(
                                                                                'POST',
                                                                                `http://43.136.111.27:8086/user/unfollow`
                                                                            )
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.setRequestHeader('Content-Type','application/json')
                                                                            xhr.send(JSON.stringify(data))
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    console.log(xhr.response)
                                                                                }
                                                                            }
                                                                        }

                                                                        if(e.target.closest('.prepareFollowing')){
                                                                            isFollow.innerHTML=`
                                                                                                            <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                            followingArray.push(response2.data)
                                                                            console.log("当前的关注者数组是",followingArray)
                                                                            const data={
                                                                                userId:response2.data.userId
                                                                            }

                                                                            /*
                                                                            * 在这里写请求就行
                                                                            *
                                                                            * */
                                                                            let xhr = new XMLHttpRequest();
                                                                            xhr.open(
                                                                                'POST',
                                                                                `http://43.136.111.27:8086/user/follow`
                                                                            )
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.setRequestHeader('Content-Type','application/json')
                                                                            xhr.send(JSON.stringify(data))
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    console.log(xhr.response)
                                                                                }
                                                                            }

                                                                        }
                                                                    })

                                                                    const collectitem= document.querySelector('.collectitem')
                                                                    let collectstatus=collectArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                    if(collectstatus){
                                                                        collectitem.innerHTML=`
                                                                                                        <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                            <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                        </svg>
                                                                                                        <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                                        <div class="count deleteCollect">(已收藏)</div>
                                                                                                    `
                                                                    }
                                                                    let currentcollect=detailresponse.data.collectCount
                                                                    collectitem.addEventListener('click',function (e){

                                                                        if(e.target.closest('.deleteCollect')){
                                                                            currentcollect--
                                                                            collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                                        `
                                                                            collectArray=collectArray.filter(article=>String(article.articleId)!==String(detailresponse.data.articleId))
                                                                            console.log("当前的收藏数组为",collectArray)
                                                                            /*
                                                                            *
                                                                            * 这里写取消关注按钮
                                                                            *
                                                                            * */
                                                                            let xhr= new XMLHttpRequest();
                                                                            xhr.open(
                                                                                'POST',
                                                                                `http://43.136.111.27:8086/article/uncollect/${detailresponse.data.articleId}`
                                                                            )
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.send()
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    console.log("取消收藏的情况为:",xhr.response)
                                                                                }
                                                                            }
                                                                        }
                                                                        if(e.target.closest('.prepareCollect')){
                                                                            currentcollect++
                                                                            collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count deleteCollect">(已收藏)</div>
                                                                                                        `
                                                                            collectArray.push(detailresponse.data)
                                                                            console.log("当前的收藏数组是",collectArray)
                                                                            /*
                                                                            * 这里写收藏按钮
                                                                            *
                                                                            * */
                                                                            let xhr= new XMLHttpRequest();
                                                                            xhr.open(
                                                                                'POST',
                                                                                `http://43.136.111.27:8086/article/collect/${detailresponse.data.articleId}`
                                                                            )
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.send()
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    console.log("收藏的情况为:",xhr.response)
                                                                                }
                                                                            }
                                                                        }
                                                                    })


                                                                    const gooditem= document.querySelector('.gooditem')
                                                                    let goodstatus=likeArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                    if(goodstatus){
                                                                        gooditem.innerHTML=`
                                                                                                       <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                       </svg>
                                                                                                       <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                                       <div class="count deletegood">(取消点赞)</div>
                                                                                                    `
                                                                    }
                                                                    let currentgood=detailresponse.data.likeCount
                                                                    gooditem.addEventListener('click',function (e){
                                                                        if(e.target.closest('.deletegood')){
                                                                            currentgood--
                                                                            gooditem.innerHTML=`
                                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">点赞数:${currentgood}</div>
                                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                                        `
                                                                            likeArray=likeArray.filter(article => String(article.articleId)!==String(detailresponse.data.articleId))
                                                                            console.log("当前的喜欢文章数组是",likeArray)
                                                                            let xhr = new XMLHttpRequest();
                                                                            xhr.open(
                                                                                'POST',
                                                                                `http://43.136.111.27:8086/article/unlike/${detailresponse.data.articleId}`
                                                                            )
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.send()
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    console.log("取消点赞为:",xhr.response)
                                                                                }
                                                                            }
                                                                        }

                                                                        if(e.target.closest('.preparegood')){
                                                                            currentgood++
                                                                            gooditem.innerHTML=`
                                                                                                           <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                    <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                           </svg>
                                                                                                           <div class="count">点赞数:${currentgood}</div>
                                                                                                           <div class="count deletegood">(取消点赞)</div>
                                                                                                        `
                                                                            likeArray.push(detailresponse.data)
                                                                            console.log("当前的喜欢文章数组是",likeArray)
                                                                            let xhr = new XMLHttpRequest();
                                                                            xhr.open(
                                                                                'POST',
                                                                                `http://43.136.111.27:8086/article/like/${detailresponse.data.articleId}`
                                                                            )
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.send()
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    console.log("点赞情况为:",xhr.response)
                                                                                }
                                                                            }
                                                                        }
                                                                    })

                                                                    console.log("当前的评论为:",response6)
                                                                    const commentContainer=document.querySelector('.CommentContainer')
                                                                    response6.data.forEach(item => {
                                                                        //判断这个文章的父亲id为0同时这个评论的
                                                                        console.log("这个评论是",item)
                                                                        let xhr = new XMLHttpRequest();
                                                                        xhr.open(
                                                                            'GET',
                                                                            `http://43.136.111.27:8086/creator/profile/${item.commentUser}`
                                                                        )
                                                                        xhr.setRequestHeader('Authorization',`${key}`)
                                                                        xhr.send()
                                                                        xhr.onreadystatechange=function (){
                                                                            if(xhr.readyState===4&&xhr.status===200){
                                                                                let response14=JSON.parse(xhr.responseText)
                                                                                console.log("当前评论的用户信息是",response14.data)
                                                                                if(item.parentId==null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                    const div=document.createElement('div')
                                                                                    div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                    console.log("当前的这个评论div是",div)
                                                                                    commentContainer.appendChild(div)
                                                                                }
                                                                                if(item.parentId==null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                    const div=document.createElement('div')
                                                                                    div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                    console.log("当前的这个评论div是",div)
                                                                                    commentContainer.appendChild(div)
                                                                                }
                                                                                if(item.parentId!=null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                    const div=document.createElement('div')
                                                                                    div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                    const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                    console.log("这个孩子评论为:",div)
                                                                                    console.log("选中的父亲id是",item.parentId)
                                                                                    console.log("选中的父亲元素是",parentdiv)
                                                                                    const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                    childrenComment.appendChild(div)
                                                                                }
                                                                                if(item.parentId!=null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                    const div=document.createElement('div')
                                                                                    div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                    const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                    console.log("选中的父亲元素是",parentdiv)
                                                                                    const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                    childrenComment.appendChild(div)
                                                                                }
                                                                            }
                                                                        }

                                                                    })

                                                                    let parentId=null
                                                                    commentContainer.addEventListener('click',function (e1){
                                                                        if(e1.target.closest('.backComment1')){
                                                                            alert('回复评论被点击')
                                                                            const div=e1.target.closest('div[commentId]')
                                                                            parentId=div.getAttribute('commentId')
                                                                            console.log("当前回复的父亲id是:",parentId)
                                                                            const createBackComment=document.querySelector('.createBackComment')
                                                                            createBackComment.style.display='block'
                                                                        }

                                                                        if(e1.target.closest('.submitpar')){
                                                                            alert('提交回复被点击')
                                                                            const parContent=document.querySelector('.parContent').value
                                                                            const parimageUrl=document.querySelector('.parimageUrl').value
                                                                            const data={
                                                                                articleId:detailresponse.data.articleId,
                                                                                content:parContent,
                                                                                imageUrl:parimageUrl,
                                                                                parentId:parentId,
                                                                            }
                                                                            console.log("当前发送的数据是:",data)
                                                                            // 清空输入框并隐藏
                                                                            document.querySelector('.parContent').value = '';
                                                                            document.querySelector('.parimageUrl').value = '';
                                                                            document.querySelector('.createBackComment').style.display = 'none';
                                                                            //在这里服务器确实返回了commentId
                                                                            let xhr = new XMLHttpRequest()
                                                                            xhr.open(
                                                                                'POST',
                                                                                `http://43.136.111.27:8086/article/comment/add`
                                                                            )
                                                                            xhr.setRequestHeader('Content-Type', 'application/json')
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.send(JSON.stringify(data))
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    let response16=JSON.parse(xhr.responseText)
                                                                                    console.log("发送评论情况为:",response16)
                                                                                    // 获取当前时间并格式化
                                                                                    const formatTime = () => {
                                                                                        const now = new Date();
                                                                                        const year = now.getFullYear();
                                                                                        const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                        const day = String(now.getDate()).padStart(2, '0');
                                                                                        const hours = String(now.getHours()).padStart(2, '0');
                                                                                        const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                        const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                    };
                                                                                    const div=document.createElement('div')
                                                                                    div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                    const parentdiv=document.querySelector(`.commentItem[commentId="${data.parentId}"]`)
                                                                                    console.log("这个孩子评论为:",div)
                                                                                    console.log("选中的父亲id是",data.parentId)
                                                                                    console.log("选中的父亲元素是",parentdiv)
                                                                                    const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                    childrenComment.appendChild(div)
                                                                                }
                                                                            }
                                                                        }

                                                                        if(e1.target.closest('.deleteComment')){
                                                                            alert('删除按钮被点击')
                                                                            const div=e1.target.closest('.commentItem[commentId]')
                                                                            //这里是选父亲元素
                                                                            commentId=div.getAttribute('commentId')
                                                                            console.log("当前删除的最近元素id是:",commentId)
                                                                            div.remove()
                                                                            let xhr = new XMLHttpRequest()
                                                                            xhr.open(
                                                                                'POST',
                                                                                `http://43.136.111.27:8086/article/comment/delete/${commentId}`
                                                                            )
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.send()
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    console.log("删除情况为:",xhr.responseText)
                                                                                }
                                                                            }
                                                                        }

                                                                        if(e1.target.closest('.submitnull')){
                                                                            alert('提交评论被点击')
                                                                            const nullContent=document.querySelector('.nullContent').value
                                                                            const nullimageUrl=document.querySelector('.nullimageUrl').value
                                                                            const data={
                                                                                articleId:detailresponse.data.articleId,
                                                                                content:nullContent,
                                                                                imageUrl:nullimageUrl,
                                                                                parentId:null
                                                                            }
                                                                            console.log("上传的null数据是",data)
                                                                            let xhr = new XMLHttpRequest()
                                                                            xhr.open(
                                                                                'POST',
                                                                                `http://43.136.111.27:8086/article/comment/add`
                                                                            )
                                                                            xhr.setRequestHeader('Content-Type', 'application/json')
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.send(JSON.stringify(data))
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    let response16=JSON.parse(xhr.responseText)
                                                                                    console.log("发送null评论情况为:",response16)
                                                                                    const formatTime = () => {
                                                                                        const now = new Date();
                                                                                        const year = now.getFullYear();
                                                                                        const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                        const day = String(now.getDate()).padStart(2, '0');
                                                                                        const hours = String(now.getHours()).padStart(2, '0');
                                                                                        const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                        const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                    };
                                                                                    const div=document.createElement('div')
                                                                                    div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                    commentContainer.appendChild(div)
                                                                                }
                                                                            }
                                                                        }
                                                                    })

                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }


        })
        CheckFollowingstatus(key)
        console.log("所有数据已经加载完毕,这是我的关注者的数组",followingArray)
        GetmyCollectArticle(key)
        console.log("所有数据已经加载完毕，这是我收藏的文章的数组",collectArray)
        GetmyLikeArticle(key)
        console.log("当前我喜欢的文章的数组是",likeArray)
        GetmyFans(key)
        console.log("当前的粉丝数组为",FansArray)
        // 完整交互逻辑
        document.querySelectorAll('.nav-button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.nav-button').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
            });
        });

        document.querySelectorAll('.category-list button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.category-list button').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
            });
        });

        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
            });
        });
        /*
        *
        *
        *
        *
        * 在这里实现修改好吧(firstPage,article2,backtofirst,还有browseArticle,记得请求成功后就添加，增强视觉效果
        *评论数就算了，因为我不知道一次会删除几个
        * */


        firstPage.addEventListener('click',function (){
            main.innerHTML=`
           <!-- 左侧分类 -->
    <div class="left-side">
        <div class="category-list">
            <button class="active">综合</button>
            <button>后端</button>
            <button>前端</button>
            <button>Android</button>
            <button>iOS</button>
            <button>人工智能</button>
            <button>工具工人</button>
            <button>代码人生</button>
            <button>阅读</button>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="tab-buttons">
            <button class="tab-button active recommendArticle">推荐</button>
            <button class="tab-button newArticle">最新</button>
            <button class="tab-button TopArticle">Top</button>
        </div>
        <div class="articleContainer2">

        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="right-side">
        <div class="right-card">
            <div class="greeting-section">
                <h3>上午好！</h3>
                <button class="signin-btn">去签到</button>
            </div>
            <div class="rank-section">
                <h4>热门文章榜</h4>
                <ul class="rank-list">
                </ul>
            </div>
            <div class="carousel">
                <div class="ctrl-arrow arrow-left"></div>
                <div class="ctrl-arrow arrow-right"></div>

                <!-- 双向克隆结构 [1,6](@ref) -->
                <div class="slider-track">
                    <!-- 克隆最后一张到开头 -->
                    <div class="slide"><img src="../image/1.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                    <!-- 原始图片 -->
                    <div class="slide"><img src="../image/2.webp" alt="图片1" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/3.webp" alt="图片2" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/1.webp" alt="图片3" style="width: 100%;height: 100%"></div>
                    <!-- 克隆第一张到末尾 -->
                    <div class="slide"><img src="../image/2.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                </div>

                <div class="indicator-dots"></div>
            </div>
        </div>
    </div>
        `
            const articleContainer2=document.querySelector('.articleContainer2')
            articleContainer2.innerHTML=``
            const rankList=document.querySelector('.rank-list')
            rankList.innerHTML=''
            recommendArticle.forEach((item,index) => {
                const div = document.createElement('div')
                div.setAttribute('articleId', item.articleId)
                div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${index+1}:${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                articleContainer2.appendChild(div)
                const li=document.createElement('li')
                li.innerHTML=`${index+1}:${item.title}`
                rankList.appendChild(li)
            })
            // 完整交互逻辑
            document.querySelectorAll('.nav-button').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.nav-button').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            document.querySelectorAll('.category-list button').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.category-list button').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            document.querySelectorAll('.tab-button').forEach(button => {
                button.addEventListener('click', function() {
                    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 配置参数 [5,7](@ref)
            const CONFIG = {
                autoPlayInterval: 5000,    // 自动播放间隔
                transitionDuration: 600,  // 过渡动画时间
                cloneSwitchDelay: 500      // 克隆图切换延迟
            };

            // DOM元素初始化
            const track = document.querySelector('.slider-track');
            const dotsContainer = document.querySelector('.indicator-dots');
            const [leftBtn, rightBtn] = document.querySelectorAll('.ctrl-arrow');

            let currentIndex = 1;          // 当前索引（从真实第一张开始）
            const realCount = 3;           // 真实图片数量
            const totalSlides = realCount + 2; // 包含克隆图总数

            // 初始化指示点 [2,8](@ref)
            function createDots() {
                for(let i=0; i<realCount; i++) {
                    const dot = document.createElement('div');
                    dot.className = `dot ${i===0 ? 'active' : ''}`;
                    dot.addEventListener('click', () => goToSlide(i));
                    dotsContainer.appendChild(dot);
                }
            }

            // 核心切换逻辑 [1,6](@ref)
            function updateSlider() {
                track.style.transform = `translateX(-${currentIndex * 100}%)`;
                updateDots();
            }

            // 边界处理优化 [6,7](@ref)
            function handleBoundary() {
                if(currentIndex <= 0) {
                    setTimeout(() => {
                        track.style.transition = 'none';
                        currentIndex = realCount;
                        track.style.transform = `translateX(-${currentIndex * 100}%)`;
                        void track.offsetWidth; // 强制重绘
                        track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
                    }, CONFIG.cloneSwitchDelay);
                }
                else if(currentIndex >= totalSlides - 1) {
                    setTimeout(() => {
                        track.style.transition = 'none';
                        currentIndex = 1;
                        track.style.transform = `translateX(-${currentIndex * 100}%)`;
                        void track.offsetWidth;
                        track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
                    }, CONFIG.cloneSwitchDelay);
                }
            }

            // 指示点状态更新 [2](@ref)
            function updateDots() {
                const realIndex = (currentIndex - 1 + realCount) % realCount;
                document.querySelectorAll('.dot').forEach((dot, index) => {
                    dot.classList.toggle('active', index === realIndex);
                });
            }

            // 导航控制 [6](@ref)
            leftBtn.addEventListener('click', () => {
                currentIndex--;
                handleBoundary();
                updateSlider();
                resetAutoPlay();
            });

            rightBtn.addEventListener('click', () => {
                currentIndex++;
                handleBoundary();
                updateSlider();
                resetAutoPlay();
            });

            // 跳转指定位置 [2,8](@ref)
            function goToSlide(index) {
                currentIndex = index + 1;
                handleBoundary();
                updateSlider();
                resetAutoPlay();
            }

            // 自动播放优化 [5,7](@ref)
            let autoTimer;
            function startAutoPlay() {
                autoTimer = setInterval(() => {
                    currentIndex++;
                    if(currentIndex === realCount) { // 最后真实图片延长展示
                        setTimeout(() => {
                            handleBoundary();
                            updateSlider();
                        }, 1000);
                    } else {
                        handleBoundary();
                        updateSlider();
                    }
                }, CONFIG.autoPlayInterval);
            }

            function resetAutoPlay() {
                clearInterval(autoTimer);
                startAutoPlay();
            }

            // 过渡结束监听 [6](@ref)
            track.addEventListener('transitionend', () => {
                if(currentIndex <= 0 || currentIndex >= totalSlides - 1) {
                    handleBoundary();
                }
            });

            // 初始化执行
            createDots();
            startAutoPlay();

            articleContainer2.addEventListener('click',function (event){
                if(event.target.closest('div[articleId]')){
                    const articleId=event.target.closest('div[articleId]').getAttribute('articleId')
                    let xhr=new XMLHttpRequest()
                    xhr.open(
                        'GET',
                        `http://43.136.111.27:8086/article/detail/${articleId}`
                    )
                    xhr.setRequestHeader('Authorization',``)
                    xhr.send()
                    xhr.onreadystatechange=function (){
                        if(xhr.readyState===4&&xhr.status===200){
                            let detailresponse=JSON.parse(xhr.responseText)
                            console.log("获取到的文章详情是",detailresponse)
                            if(isLogin==1){
                                alert('你已经登录')
                                /*
                                * 这是获取用户信息，因为不需要渲染评论，所以只用获取到个人信息和他的作品,他的粉丝，他的关注者就够了
                                * */
                                /*
                                * 失败，没有token根本查看别人的个人信息
                                *
                                * */
                                let xhr2=new XMLHttpRequest()
                                xhr2.open(
                                    'GET',
                                    `http://43.136.111.27:8086/creator/profile/${detailresponse.data.userId}`
                                )
                                xhr2.setRequestHeader('Authorization',`${key}`)
                                xhr2.send()
                                xhr2.onreadystatechange=function (){
                                    if(xhr2.readyState===4&&xhr2.status===200){
                                        let response2=JSON.parse(xhr2.responseText)
                                        console.log("获取到的用户信息是:",response2)
                                        let xhr3=new XMLHttpRequest()
                                        xhr3.open(
                                            'GET',
                                            `http://43.136.111.27:8086/creator/following/${detailresponse.data.userId}`
                                        )
                                        xhr3.setRequestHeader('Authorization',`${key}`)
                                        xhr3.send()
                                        xhr3.onreadystatechange=function (){
                                            if(xhr3.readyState===4&&xhr3.status===200){
                                                let response3=JSON.parse(xhr3.responseText)
                                                console.log("当前创作者的关注信息是:",response3)
                                                let xhr4=new XMLHttpRequest()
                                                xhr4.open(
                                                    'GET',
                                                    `http://43.136.111.27:8086/creator/followers/${detailresponse.data.userId}`
                                                )
                                                xhr4.setRequestHeader('Authorization',`${key}`)
                                                xhr4.send()
                                                xhr4.onreadystatechange=function (){
                                                    if(xhr4.readyState===4&&xhr4.status===200){
                                                        let response4=JSON.parse(xhr4.responseText)
                                                        console.log("当前创作者的粉丝是:",response4)
                                                        let xhr5=new XMLHttpRequest()
                                                        xhr5.open(
                                                            'GET',
                                                            `http://43.136.111.27:8086/article/following-articles?followerId=${detailresponse.data.userId}`
                                                        )
                                                        xhr5.setRequestHeader('Authorization',`${key}`)
                                                        xhr5.send()
                                                        xhr5.onreadystatechange=function (){
                                                            if(xhr5.readyState===4&&xhr5.status===200){
                                                                let response5=JSON.parse(xhr5.responseText)
                                                                console.log("当前他的作品为:",response5)
                                                                let xhr6=new XMLHttpRequest()
                                                                xhr6.open(
                                                                    'GET',
                                                                    `http://43.136.111.27:8086/article/comment/list/${articleId}`
                                                                )
                                                                xhr6.setRequestHeader('Authorization',`${key}`)
                                                                xhr6.send()
                                                                xhr6.onreadystatechange=function (){
                                                                    if(xhr6.readyState===4&&xhr6.status===200){
                                                                        let response6=JSON.parse(xhr6.responseText)
                                                                        console.log("当前的评论为",response6)
                                                                        main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backFirstPage22">返回首页</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${detailresponse.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>

                                                                                        <!-- 评论 -->
                                                                                        <div class="action-item" style="color:#1E80FF">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-3 12H7v-2h10v2zm0-3H7V9h10v2zm0-3H7V6h10v2z"/>
                                                                                            </svg>
                                                                                            <div class="count">评论数:${response6.data.length}</div>

                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${detailresponse.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${detailresponse.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${detailresponse.data.tags}</span>
                                                                                                <span>${detailresponse.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="CommentContainer">
                                                                                            <div class="createComment">
                                                                                                <h6>来发布你的评论吧</h6>
                                                                                                <div><input type="text" class="nullContent" placeholder="请输入文本"></div>
                                                                                                <div><input type="text" class="nullimageUrl" placeholder="请输入图片网址"></div>
                                                                                                <div><button class="submitnull">发布</button></div>
                                                                                            </div>
                                                                                            <div class="createBackComment" style="display: none">
                                                                                                <h6>来发布你的回复吧</h6>
                                                                                                <div><input type="text" class="parContent" placeholder="请输入回复文本"></div>
                                                                                                <div><input type="text" class="parimageUrl" placeholder="请输入回复图片网址"></div>
                                                                                                <div><button class="submitpar">发布</button></div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 右侧用户信息 -->
                                                                                    <div class="user-sidebar">
                                                                                        <div class="user-card">
                                                                                            <div class="user-header"> <!-- 新增flex容器 -->
                                                                                                <img src="${response2.data.avatar}" class="user-avatar" style="width:60px;height:60px">
                                                                                                <div class="user-info">
                                                                                                    <h3>${response2.data.username}</h3>
                                                                                                    <p class="position">${response2.data.profession}</p>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="stats">
                                                                                                <div>
                                                                                                    <div class="number">${response5.data.records.length}</div>
                                                                                                    <div class="label">文章</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response3.data.records.length}</div>
                                                                                                    <div class="label">关注</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response4.data.records.length}</div>
                                                                                                    <div class="label">粉丝</div>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="actions isFollow">
                                                                                                <button class="follow-btn prepareFollowing">关注</button>
                                                                                                <button class="message-btn">私信</button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                                                                        const isFollow=document.querySelector('.isFollow')
                                                                        let followStatus=followingArray.some(user=>user.userId===detailresponse.data.userId)
                                                                        if(followStatus){
                                                                            isFollow.innerHTML=`
                                                                                                        <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                        <button class="message-btn">私信</button>
                                                                                                    `
                                                                        }

                                                                        isFollow.addEventListener('click',function (e){
                                                                            if(e.target.closest('.deleteFollowing')){
                                                                                isFollow.innerHTML=`
                                                                                                            <button class="follow-btn prepareFollowing">关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                followingArray = followingArray.filter(user => String(user.userId) !== String(detailresponse.data.userId));
                                                                                console.log("当前的关注者数组是",followingArray)
                                                                                /*
                                                                                *
                                                                                * 在这里写请求就行
                                                                                *
                                                                                * */
                                                                                const data={
                                                                                    userId:detailresponse.data.userId
                                                                                }
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/user/unfollow`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.setRequestHeader('Content-Type','application/json')
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log(xhr.response)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e.target.closest('.prepareFollowing')){
                                                                                isFollow.innerHTML=`
                                                                                                            <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                followingArray.push(response2.data)
                                                                                console.log("当前的关注者数组是",followingArray)
                                                                                const data={
                                                                                    userId:response2.data.userId
                                                                                }

                                                                                /*
                                                                                * 在这里写请求就行
                                                                                *
                                                                                * */
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/user/follow`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.setRequestHeader('Content-Type','application/json')
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log(xhr.response)
                                                                                    }
                                                                                }

                                                                            }
                                                                        })

                                                                        const collectitem= document.querySelector('.collectitem')
                                                                        let collectstatus=collectArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                        if(collectstatus){
                                                                            collectitem.innerHTML=`
                                                                                                        <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                            <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                        </svg>
                                                                                                        <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                                        <div class="count deleteCollect">(已收藏)</div>
                                                                                                    `
                                                                        }
                                                                        let currentcollect=detailresponse.data.collectCount
                                                                        collectitem.addEventListener('click',function (e){

                                                                            if(e.target.closest('.deleteCollect')){
                                                                                currentcollect--
                                                                                collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                                        `
                                                                                collectArray=collectArray.filter(article=>String(article.articleId)!==String(detailresponse.data.articleId))
                                                                                console.log("当前的收藏数组为",collectArray)
                                                                                /*
                                                                                *
                                                                                * 这里写取消关注按钮
                                                                                *
                                                                                * */
                                                                                let xhr= new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/uncollect/${detailresponse.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("取消收藏的情况为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }
                                                                            if(e.target.closest('.prepareCollect')){
                                                                                currentcollect++
                                                                                collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count deleteCollect">(已收藏)</div>
                                                                                                        `
                                                                                collectArray.push(detailresponse.data)
                                                                                console.log("当前的收藏数组是",collectArray)
                                                                                /*
                                                                                * 这里写收藏按钮
                                                                                *
                                                                                * */
                                                                                let xhr= new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/collect/${detailresponse.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("收藏的情况为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }
                                                                        })


                                                                        const gooditem= document.querySelector('.gooditem')
                                                                        let goodstatus=likeArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                        if(goodstatus){
                                                                            gooditem.innerHTML=`
                                                                                                       <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                       </svg>
                                                                                                       <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                                       <div class="count deletegood">(取消点赞)</div>
                                                                                                    `
                                                                        }
                                                                        let currentgood=detailresponse.data.likeCount
                                                                        gooditem.addEventListener('click',function (e){
                                                                            if(e.target.closest('.deletegood')){
                                                                                currentgood--
                                                                                gooditem.innerHTML=`
                                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">点赞数:${currentgood}</div>
                                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                                        `
                                                                                likeArray=likeArray.filter(article => String(article.articleId)!==String(detailresponse.data.articleId))
                                                                                console.log("当前的喜欢文章数组是",likeArray)
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/unlike/${detailresponse.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("取消点赞为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e.target.closest('.preparegood')){
                                                                                currentgood++
                                                                                gooditem.innerHTML=`
                                                                                                           <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                    <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                           </svg>
                                                                                                           <div class="count">点赞数:${currentgood}</div>
                                                                                                           <div class="count deletegood">(取消点赞)</div>
                                                                                                        `
                                                                                likeArray.push(detailresponse.data)
                                                                                console.log("当前的喜欢文章数组是",likeArray)
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/like/${detailresponse.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("点赞情况为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }
                                                                        })

                                                                        console.log("当前的77999评论为:",response6)
                                                                        const commentContainer=document.querySelector('.CommentContainer')
                                                                        response6.data.forEach(item => {
                                                                            //判断这个文章的父亲id为0同时这个评论的
                                                                            console.log("这个评论898是",item)
                                                                            let xhr = new XMLHttpRequest();
                                                                            xhr.open(
                                                                                'GET',
                                                                                `http://43.136.111.27:8086/creator/profile/${item.commentUser}`
                                                                            )
                                                                            xhr.setRequestHeader('Authorization',`${key}`)
                                                                            xhr.send()
                                                                            xhr.onreadystatechange=function (){
                                                                                if(xhr.readyState===4&&xhr.status===200){
                                                                                    let response14=JSON.parse(xhr.responseText)
                                                                                    console.log("当前评论的用户信息是",response14.data)
                                                                                    if(item.parentId==null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        console.log("当前的这个评论div是",div)
                                                                                        commentContainer.appendChild(div)
                                                                                    }
                                                                                    if(item.parentId==null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        console.log("当前的这个评论div是",div)
                                                                                        commentContainer.appendChild(div)
                                                                                    }
                                                                                    if(item.parentId!=null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                        console.log("这个孩子评论为:",div)
                                                                                        console.log("选中的父亲id是",item.parentId)
                                                                                        console.log("选中的父亲元素是",parentdiv)
                                                                                        const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                        childrenComment.appendChild(div)
                                                                                    }
                                                                                    if(item.parentId!=null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                        console.log("选中的父亲元素是",parentdiv)
                                                                                        const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                        childrenComment.appendChild(div)
                                                                                    }
                                                                                }
                                                                            }

                                                                        })

                                                                        let parentId=null
                                                                        commentContainer.addEventListener('click',function (e1){
                                                                            if(e1.target.closest('.backComment1')){
                                                                                alert('回复评论被点击')
                                                                                const div=e1.target.closest('div[commentId]')
                                                                                parentId=div.getAttribute('commentId')
                                                                                console.log("当前回复的父亲id是:",parentId)
                                                                                const createBackComment=document.querySelector('.createBackComment')
                                                                                createBackComment.style.display='block'
                                                                            }

                                                                            if(e1.target.closest('.submitpar')){
                                                                                alert('提交回复被点击')
                                                                                const parContent=document.querySelector('.parContent').value
                                                                                const parimageUrl=document.querySelector('.parimageUrl').value
                                                                                const data={
                                                                                    articleId:detailresponse.data.articleId,
                                                                                    content:parContent,
                                                                                    imageUrl:parimageUrl,
                                                                                    parentId:parentId,
                                                                                }
                                                                                console.log("当前发送的数据是:",data)
                                                                                // 清空输入框并隐藏
                                                                                document.querySelector('.parContent').value = '';
                                                                                document.querySelector('.parimageUrl').value = '';
                                                                                document.querySelector('.createBackComment').style.display = 'none';
                                                                                //在这里服务器确实返回了commentId
                                                                                let xhr = new XMLHttpRequest()
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/comment/add`
                                                                                )
                                                                                xhr.setRequestHeader('Content-Type', 'application/json')
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        let response16=JSON.parse(xhr.responseText)
                                                                                        console.log("发送评论情况为:",response16)
                                                                                        // 获取当前时间并格式化
                                                                                        const formatTime = () => {
                                                                                            const now = new Date();
                                                                                            const year = now.getFullYear();
                                                                                            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                            const day = String(now.getDate()).padStart(2, '0');
                                                                                            const hours = String(now.getHours()).padStart(2, '0');
                                                                                            const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                            const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                        };
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        const parentdiv=document.querySelector(`.commentItem[commentId="${data.parentId}"]`)
                                                                                        console.log("这个孩子评论为:",div)
                                                                                        console.log("选中的父亲id是",data.parentId)
                                                                                        console.log("选中的父亲元素是",parentdiv)
                                                                                        const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                        childrenComment.appendChild(div)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e1.target.closest('.deleteComment')){
                                                                                alert('删除按钮被点击')
                                                                                const div=e1.target.closest('.commentItem[commentId]')
                                                                                //这里是选父亲元素
                                                                                commentId=div.getAttribute('commentId')
                                                                                console.log("当前删除的最近元素id是:",commentId)
                                                                                div.remove()
                                                                                let xhr = new XMLHttpRequest()
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/comment/delete/${commentId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("删除情况为:",xhr.responseText)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e1.target.closest('.submitnull')){
                                                                                alert('提交评论被点击')
                                                                                const nullContent=document.querySelector('.nullContent').value
                                                                                const nullimageUrl=document.querySelector('.nullimageUrl').value
                                                                                const data={
                                                                                    articleId:detailresponse.data.articleId,
                                                                                    content:nullContent,
                                                                                    imageUrl:nullimageUrl,
                                                                                    parentId:null
                                                                                }
                                                                                console.log("上传的null数据是",data)
                                                                                let xhr = new XMLHttpRequest()
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/comment/add`
                                                                                )
                                                                                xhr.setRequestHeader('Content-Type', 'application/json')
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        let response16=JSON.parse(xhr.responseText)
                                                                                        console.log("发送null评论情况为:",response16)
                                                                                        const formatTime = () => {
                                                                                            const now = new Date();
                                                                                            const year = now.getFullYear();
                                                                                            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                            const day = String(now.getDate()).padStart(2, '0');
                                                                                            const hours = String(now.getHours()).padStart(2, '0');
                                                                                            const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                            const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                        };
                                                                                        const div=document.createElement('div')
                                                                                        div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                        commentContainer.appendChild(div)
                                                                                    }
                                                                                }
                                                                            }
                                                                        })

                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            })
        })


        // 导航栏交互控制
        document.addEventListener('click',function (e){

            if(e.target.closest('.avatar1')){
                GetMyBrowseArticle(key,current)
            }
            if(e.target.closest('.btn-settings')){
                alert('设置被点击')
                main.innerHTML=`
                    <div class="settings-container">
    <!-- 返回栏 -->
    <div class="return-bar">
        <a href="#" class="return-link">← 返回个人主页</a>
    </div>

    <!-- 主体内容 -->
    <div class="settings-main">
        <!-- 左侧导航 -->
        <div class="nav-column1">
            <div class="nav-item1 active">个人资料</div>
            <div class="nav-item1">账号设置</div>
            <div class="nav-item1">通用设置</div>
            <div class="nav-item1">消息设置</div>
            <div class="nav-item1">屏蔽管理</div>
            <div class="nav-item1">标签管理</div>
        </div>

        <!-- 中间表单 -->
        <div class="form-column1">
            <h2 class="form-title1">个人资料</h2>

            <div class="form-group1">
                <label class="form-label1"><span>*</span>邮箱</label>
                <input type="text" class="form-input1 currentEmail" value="${userdata.email}">
                <div class="char-count1">${userdata.email.length}/20</div>
            </div>

            <div class="form-group1">
                <label class="form-label1"><span>*</span>用户名</label>
                <input type="text" class="form-input1 currentUsername" value="${userdata.username}">
                <div class="char-count1">${userdata.username.length}/20</div>
            </div>

            <div class="form-group1">
                <label class="form-label1"><span>*</span>密码</label>
                <input type="text" class="form-input1 currentPassword" value="${userdata.password}">
                <div class="char-count1">${userdata.password.length}/20</div>
            </div>

            <div class="form-group1">
                <label class="form-label1"><span>*</span>开始工作</label>
                <input type="text" class="form-input1 currentStartwork" value="${userdata.startWorkYear}">
            </div>

            <div class="form-group1">
                <label class="form-label1">公司</label>
                <input type="text" class="form-input1 currentCompany" value="${userdata.company}">

            </div>

            <div class="form-group1">
                <label class="form-label1">方向</label>
                <input type="url" class="form-input1 currentPosition" value="${userdata.position}">

            </div>

            <div class="form-group1">
                <label class="form-label1">职位</label>
                <input type="url" class="form-input1 currentProfession" value="${userdata.profession}">

            </div>

            <div class="form-group1">
                <label class="form-label1">个人介绍</label>
                <input type="url" class="form-input1 currentintroduction" value="${userdata.introduction}">

            </div>
            <div class="form-group1">
                <label class="form-label1">兴趣</label>
                <input type="url" class="form-input1 currentInterest" value="${userdata.interests}">

            </div>

            <button style="width:90px;height:40px;border-radius:5%;
            background-color: #1e80ff;color: white;border-color:#1e80ff;font-size: 14px"
            class="submitcurrent">保存更改</button>
        </div>

        <!-- 右侧头像 -->
        <div class="avatar-column1">
            <div class="avatar-card1">
                <div class="avatar-preview1">
                    <img src="${userdata.avatar}" alt="头像" style="width:100%;height:100%" class="userAvatar1">
                </div>
                <div class="upload-tip">上传头像</div>
                <input type="url" class="form-input1 currentAvatar" value="${userdata.avatar}" style="display: none">
                <div class="format-tip">支持JPG、PNG、JPEG格式</div>
                <div class="format-tip">建议尺寸 200x200 像素</div>
            </div>
        </div>
    </div>
</div>
                `
                // 导航交互
                document.querySelectorAll('.nav-item1').forEach(item => {
                    item.addEventListener('click', function() {
                        document.querySelectorAll('.nav-item1').forEach(nav => nav.classList.remove('active'));
                        this.classList.add('active');
                    });
                });

                // 输入字符统计
                document.querySelectorAll('.form-input1').forEach(input => {
                    input.addEventListener('input', function() {
                        const counter = this.parentElement.querySelector('.char-count1');
                        if (counter) {
                            const max = parseInt(counter.textContent.split('/')[1]);
                            counter.textContent = `${this.value.length}/${max}`;
                        }
                    });
                });
            }
            if(e.target.closest('.return-bar')){
                GetMyBrowseArticle(key,current)
            }


            if(e.target.closest('.submitcurrent')){
                alert('提交按钮被点击')
                const currentEmail=document.querySelector('.currentEmail').value;
                console.log("当前修改的邮箱是:",currentEmail);
                userdata.email=currentEmail;
                const currentUsername=document.querySelector('.currentUsername').value;
                console.log("当前修改的用户名是:",currentUsername)
                userdata.username=currentUsername;
                const currentCompany=document.querySelector('.currentCompany').value;
                console.log("当前修改的公司是:",currentCompany)
                userdata.company=currentCompany;
                const currentPassword=document.querySelector('.currentPassword').value;
                console.log("当前修改的密码是:",currentPassword)
                userdata.password=currentPassword;
                const currentintroduction=document.querySelector('.currentintroduction').value;
                console.log("当前修改的个人介绍是",currentintroduction)
                userdata.introduction=currentintroduction;
                const currentStartwork=document.querySelector('.currentStartwork').value;
                console.log("当前的开始工作年份是",currentStartwork)
                userdata.startWorkYear=currentStartwork;
                const currentPosition=document.querySelector('.currentPosition').value;
                console.log("当前修改的方向是",currentPosition)
                userdata.position=currentPosition;
                const currentProfession=document.querySelector('.currentProfession').value;
                console.log("当前修改的职位是",currentProfession)
                userdata.profession=currentProfession;
                const currentInterest=document.querySelector('.currentInterest').value;
                console.log("当前兴趣是",currentInterest)
                userdata.interests=currentInterest;
                const currentAvatar=document.querySelector('.currentAvatar').value;
                console.log("当前的用户头像为:",currentAvatar)
                const userAvatar=document.querySelector('.userAvatar')
                userAvatar.src=currentAvatar;
                const userAvatar1=document.querySelector('.userAvatar1')
                userAvatar1.src=currentAvatar;
                userdata.avatar=currentAvatar
                const data={
                    userId: userdata.userId,
                    username: currentUsername,
                    password: currentPassword,
                    email: currentEmail,
                    startWorkYear: currentStartwork,
                    profession: currentProfession,
                    introduction: currentintroduction,
                    company: currentCompany,
                    position: currentPosition,
                    interests: currentInterest,
                    avatar: currentAvatar
                }
                console.log("当前的修改用户数据是",data)
                console.log("修改后的userdata是",userdata)
                let xhr = new XMLHttpRequest();
                xhr.open(
                    'POST',
                    `http://43.136.111.27:8086/user/refresh/info`
                )
                xhr.setRequestHeader('Content-Type', 'application/json')
                xhr.setRequestHeader('Authorization',`${key}`)
                xhr.send(JSON.stringify(data))
                xhr.onreadystatechange=function (){
                    if(xhr.readyState===4&&xhr.status===200){
                        let response=JSON.parse(xhr.responseText);
                        console.log("修改结果为:",response)
                        alert('修改成功')
                    }
                }
            }
            if(e.target.closest('.upload-tip')){

                const currentAvatar=document.querySelector('.currentAvatar')
                console.log(currentAvatar)
                currentAvatar.style.display='block';
                console.log(currentAvatar)
                currentAvatar.focus()
                currentAvatar.addEventListener('blur', () => {
                    if(currentAvatar.value.trim()!==''){
                        const userAvatar=document.querySelector('.userAvatar')
                        userAvatar.src=currentAvatar.value;
                        const userAvatar1=document.querySelector('.userAvatar1')
                        userAvatar1.src=currentAvatar.value;
                        userdata.avatar=currentAvatar.value;
                        console.log("当前用户数据是:",userdata)
                    }
                    currentAvatar.style.display='none';
                })
            }
            if(e.target.closest('.myBrowseArticle')){
                GetMyBrowseArticle(key,current)
            }
            if(e.target.closest('.systeminform')){
                alert('系统通知被点击')
                const articleContainer=document.querySelector('.articleContainer')
                articleContainer.innerHTML=``
                const formGroup=document.querySelector('.form-group1')
                formGroup.innerHTML=``
            }

            if(e.target.closest('.backTopersonal')){
                GetMyBrowseArticle(key,current)
            }

            if(e.target.closest('.Mygood')){
                alert('点赞记录被点击')
                const articleContainer=document.querySelector('.articleContainer')
                articleContainer.innerHTML=``
                const formGroup=document.querySelector('.form-group1')
                formGroup.innerHTML=``
                likeArray.forEach(item=>{
                    let xhr2=new XMLHttpRequest()
                    xhr2.open(
                        'GET',
                        `http://43.136.111.27:8086/article/detail/${item.articleId}`
                    )
                    //看其是否被删除
                    xhr2.setRequestHeader('Authorization',`${key}`)
                    xhr2.send()
                    xhr2.onreadystatechange=function (){
                        if(xhr2.readyState===4&&xhr2.status===200){
                            let response2 = JSON.parse(xhr2.responseText)
                            console.log("这是response2222,每个文章的情况为:",response2)
                            if(response2.data.isDeleted===0){
                                lookArray1 = []
                                //这里创建数组的目的是为了请求数据不出现重复的数组
                                const look1 = {}
                                for (const key in item) {
                                    look1[key] = item[key]
                                }
                                const isexist = lookArray1.some(
                                    existing => existing.articleId === look1.articleId
                                )
                                if (!isexist) {
                                    lookArray1.push(look1)
                                    //创建文章的浏览记录的div
                                    const div = document.createElement('div')
                                    div.setAttribute('articleId', response2.data.articleId)
                                    div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${response2.data.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${response2.data.title}</h3>
                <div class="article-tags">
                    <div class="tag">${response2.data.labelId}</div>
                    <div class="tag">${response2.data.tags}</div>
                </div>
                <p class="article-desc">${response2.data.summary}</p>
                <div class="article-meta">
                    <span>发表于:${response2.data.createTime}</span>
                    <span>${response2.data.viewCount} 阅读</span>
                    <span>${response2.data.likeCount} 赞</span>
                    <span>更新于:${response2.data.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                                    articleContainer.appendChild(div)
                                }
                            }
                        }
                    }
                })
            }
            if(e.target.closest('.MyFans')){
                alert('我的粉丝被点击')
                FansArray=[]
                GetmyFans(key)
            }
            if(e.target.closest('.Mywork')){
                mywork=[]
                getMywork(key)
            }
            if(e.target.closest('.Myfollowing')){
                alert('关注列表被点击')
                followingArray=[]
                CheckFollowingstatus(key)

            }
            if(e.target.closest('.clearBrowse')){
                let xhr = new XMLHttpRequest();
                xhr.open(
                    'GET',
                    `http://43.136.111.27:8086/user/clear/myrecord`
                )
                xhr.setRequestHeader('Authorization',`${key}`)
                xhr.send()
                xhr.onreadystatechange=function (){
                    if(xhr.readyState===4&&xhr.status===200){
                        let response=JSON.parse(xhr.responseText);
                        console.log(response)
                        alert('清除成功')
                    }
                }
            }
            if(e.target.closest('.MyCollectArticle')){
                const articleContainer=document.querySelector('.articleContainer')
                articleContainer.innerHTML=``
                const formGroup=document.querySelector('.form-group1')
                formGroup.innerHTML=``
                collectArray.forEach(item=>{
                    let xhr2=new XMLHttpRequest()
                    xhr2.open(
                        'GET',
                        `http://43.136.111.27:8086/article/detail/${item.articleId}`
                    )
                    //看其是否被删除
                    xhr2.setRequestHeader('Authorization',`${key}`)
                    xhr2.send()
                    xhr2.onreadystatechange=function (){
                        if(xhr2.readyState===4&&xhr2.status===200){
                            let response2 = JSON.parse(xhr2.responseText)
                            console.log("这是response3333,每个文章的情况为:",response2)
                            if(response2.data.isDeleted===0){
                                lookArray1 = []
                                //这里创建数组的目的是为了请求数据不出现重复的数组
                                const look1 = {}
                                for (const key in item) {
                                    look1[key] = item[key]
                                }
                                const isexist = lookArray1.some(
                                    existing => existing.articleId === look1.articleId
                                )
                                if (!isexist) {
                                    lookArray1.push(look1)
                                    //创建文章的浏览记录的div
                                    const div = document.createElement('div')
                                    div.setAttribute('articleId', response2.data.articleId)
                                    div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${response2.data.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${response2.data.title}</h3>
                <div class="article-tags">
                    <div class="tag">${response2.data.labelId}</div>
                    <div class="tag">${response2.data.tags}</div>
                </div>
                <p class="article-desc">${response2.data.summary}</p>
                <div class="article-meta">
                    <span>发表于:${response2.data.createTime}</span>
                    <span>${response2.data.viewCount} 阅读</span>
                    <span>${response2.data.likeCount} 赞</span>
                    <span>更新于:${response2.data.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                                    articleContainer.appendChild(div)
                                }
                            }
                        }
                    }
                })
            }


            if(e.target.closest('.deleteFollow')){
                const userDiv = e.target.closest('div[userid]');
                const userId = userDiv.getAttribute('userId');
                const data={
                    userId:userId
                }
                userDiv.remove()
                followingArray = followingArray.filter(user => String(user.userId) !== String(userId));
                let xhr=new XMLHttpRequest();
                xhr.open(
                    'POST',
                    `http://43.136.111.27:8086/user/unfollow`
                )
                xhr.setRequestHeader('Authorization',`${key}`)
                xhr.setRequestHeader('Content-Type',`application/json`)
                xhr.send(JSON.stringify(data))
                xhr.onreadystatechange=function (){
                    if(xhr.readyState===4&&xhr.status===200){
                        let response2 = JSON.parse(xhr.responseText)
                        console.log(response2)
                    }
                    else{
                        console.log("取消关注情况为:",xhr.responseText)
                    }
                }
                alert('已取消关注')
                console.log("当前的followArray数组为:",followingArray)
            }


            /*
            *
            *
            *
            * 这个方向已经存在递推关系了
            *
            *
            *
            * */

            if(e.target.closest('.SeeHisPage')){
                /*
                * 记录当前的页面
                * */

                const currentInnerhtml=main.innerHTML
                const userDiv = e.target.closest('div[userId]');
                const userId = userDiv.getAttribute('userId');
                console.log("当前获取到的userId:",userId)
                hiswork=[]
                getHiswork(key,userId)
                hisFollower=[]
                getHisFollower(key,userId)
                hisFans=[]
                getHisFans(key,userId)
                let xhr = new XMLHttpRequest()
                xhr.open(
                    'GET',
                    `http://43.136.111.27:8086/creator/profile/${userId}`
                )
                xhr.setRequestHeader('Authorization',`${key}`)
                xhr.send()
                xhr.onreadystatechange=function (){
                    if(xhr.readyState===4&&xhr.status===200){
                        let response = JSON.parse(xhr.responseText)
                        console.log("当前获取到的点击用户信息是",response)
                        //直接再发送三次请求
                        let xhr2 = new XMLHttpRequest()
                        xhr2.open(
                            'GET',
                            `http://43.136.111.27:8086/creator/following/${userId}`
                        )
                        xhr2.setRequestHeader('Authorization',`${key}`)
                        xhr2.send()
                        xhr2.onreadystatechange=function (){
                            if(xhr2.readyState===4&&xhr2.status===200){
                                let response2 = JSON.parse(xhr2.responseText)
                                console.log("当前用户的所有关注者是",response2.data)
                                let totalFollowers = response2.data.total;
                                let xhr3 = new XMLHttpRequest()
                                xhr3.open(
                                    'GET',
                                    `http://43.136.111.27:8086/creator/followers/${userId}`
                                )
                                xhr3.setRequestHeader('Authorization',`${key}`)
                                xhr3.send()
                                xhr3.onreadystatechange=function (){
                                    if(xhr3.readyState===4&&xhr3.status===200){
                                        let response3 = JSON.parse(xhr3.responseText)
                                        console.log("当前用户的所有粉丝是:",response3.data)
                                        let totalFans = response3.data.total;
                                        let xhr4 = new XMLHttpRequest()
                                        xhr4.open(
                                            'GET',
                                            `http://43.136.111.27:8086/article/following-articles?followerId=${userId}`
                                        )
                                        xhr4.setRequestHeader('Authorization',`${key}`)
                                        xhr4.send()
                                        xhr4.onreadystatechange=function (){
                                            if(xhr4.readyState===4&&xhr4.status===200){
                                                let response4 = JSON.parse(xhr4.responseText)
                                                console.log("当前用户的所有文章是:",response4.data)
                                                let totalwork = response4.data.total;
                                                main.innerHTML=`
                    <!-- 个人主页内容 -->
                    <div class="profile-container">
    <!-- 主内容区 -->
    <div class="main-profile">
        <div class="profile-header">
            <img src="${response.data.avatar}" class="user-avatar" alt="用户头像" class="userAvatar2">
            <div class="user-info">
                <h1 class="username">${response.data.username}</h1>
                <h4>职位:${response.data.profession}</h4>
                <h4>公司:${response.data.company}</h4>
                <h4>兴趣:${response.data.interests}</h4>
                <h4>方向:${response.data.position}</h4>
                <h4>开始工作年份:${response.data.startWorkYear}</h4>
            </div>
        </div>

        <nav class="profile-nav chooseNav">
            <div class="nav-item active hisWork" style="font-size: 13px">他的作品</div>
            <div class="nav-item hisfollower" style="font-size: 13px">他的关注</div>
            <div class="nav-item hisFans" style="font-size: 13px">他的粉丝</div>
            <div class="nav-item hisFans" style="font-size: 13px">他的粉丝</div>
            <div class="nav-item hisFans" style="font-size: 13px">他的粉丝</div>
            <div class="nav-item hisFans" style="font-size: 13px">他的粉丝</div>
        </nav>
        <div class="articleContainer">

        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="profile-sidebar">
        <div class="stats-card">
            <div class="stats-row">
                <div class="stat-item">
                    <div class="stat-value">${totalFollowers}</div>
                    <div class="stat-label">关注了</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">${totalFans}</div>
                    <div class="stat-label">粉丝</div>
                </div>
            </div>
        </div>

        <div class="stats-card">
            <div class="stats-row">
                <div class="stat-item">
                    <div class="stat-value">${totalwork}</div>
                    <div class="stat-label">他的作品</div>
                </div>

                 <div class="stat-item">
                    <div class="stat-value">${totalwork}</div>
                    <div class="stat-label">他的作品</div>
                 </div>
            </div>
        </div>
    </div>
</div>
                `
                                                document.querySelectorAll('.nav-item').forEach(item => {
                                                    item.addEventListener('click', function() {
                                                        // 移除所有按钮激活状态
                                                        document.querySelectorAll('.nav-item').forEach(btn => {
                                                            btn.classList.remove('active');
                                                        });

                                                        // 为当前按钮添加激活状态
                                                        this.classList.add('active');

                                                        // 触发对应内容区的显示（需自行实现内容切换逻辑）
                                                        const tabType = this.textContent.trim();
                                                        console.log(`切换到${tabType}页面`);
                                                    });
                                                });
                                                const articleContainer = document.querySelector('.articleContainer');
                                                hiswork.forEach(item=>{
                                                    const div = document.createElement('div')
                                                    div.setAttribute('articleId', item.articleId)
                                                    div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                                                    articleContainer.appendChild(div)
                                                })
                                                articleContainer.addEventListener('click', function(e1) {
                                                    if(e1.target.closest('div[articleId]')){
                                                        const articleId=e1.target.closest('div[articleId]').getAttribute('articleId');
                                                        console.log("当前我点击的div是:",articleId)
                                                        alert('文章被点击'+articleId)
                                                        let xhr=new XMLHttpRequest()
                                                        xhr.open(
                                                            'GET',
                                                            `http://43.136.111.27:8086/article/detail/${articleId}`
                                                        )
                                                        xhr.setRequestHeader('Authorization',`${key}`)
                                                        xhr.send()
                                                        xhr.onreadystatechange=function(){
                                                            if(xhr.readyState===4&&xhr.status===200){
                                                                let response3 = JSON.parse(xhr.responseText)
                                                                console.log("当前获取到的文章内容是:",response3)
                                                                let xhr1=new XMLHttpRequest()
                                                                xhr1.open(
                                                                    'GET',
                                                                    `http://43.136.111.27:8086/creator/profile/${response3.data.userId}`
                                                                )
                                                                xhr1.setRequestHeader('Authorization',`${key}`)
                                                                xhr1.send()
                                                                xhr1.onreadystatechange=function(){
                                                                    if(xhr1.readyState===4&&xhr1.status===200){
                                                                        let response4 = JSON.parse(xhr1.responseText)
                                                                        console.log("获取到的用户信息是:",response4)
                                                                        //response4为创作者的个人信息
                                                                        let xhr2=new XMLHttpRequest()
                                                                        xhr2.open(
                                                                            'GET',
                                                                            `http://43.136.111.27:8086/creator/followers/${response4.data.userId}`
                                                                        )
                                                                        xhr2.setRequestHeader('Authorization',`${key}`)
                                                                        xhr2.send()
                                                                        xhr2.onreadystatechange=function(){
                                                                            if(xhr2.readyState===4&&xhr2.status===200){
                                                                                let response5 = JSON.parse(xhr2.responseText)
                                                                                console.log(response5)
                                                                                let totalFans= response5.data.total
                                                                                console.log("当前粉丝数为:",totalFans)
                                                                                let xhr3=new XMLHttpRequest()
                                                                                xhr3.open(
                                                                                    'GET',
                                                                                    `http://43.136.111.27:8086/creator/following/${response4.data.userId}`
                                                                                )
                                                                                xhr3.setRequestHeader('Authorization',`${key}`)
                                                                                xhr3.send()
                                                                                xhr3.onreadystatechange=function(){
                                                                                    if(xhr3.readyState===4&&xhr3.status===200){
                                                                                        let response6 = JSON.parse(xhr3.responseText)
                                                                                        console.log("当前的关注人数是:",response6)
                                                                                        let totalFollowing=response6.data.total
                                                                                        console.log("当前的关注者人数为:",totalFollowing)
                                                                                        let xhr4=new XMLHttpRequest()
                                                                                        xhr4.open(
                                                                                            'GET',
                                                                                            `http://43.136.111.27:8086/article/comment/list/${response3.data.articleId}`
                                                                                        )
                                                                                        xhr4.setRequestHeader('Authorization',`${key}`)
                                                                                        xhr4.send()
                                                                                        xhr4.onreadystatechange=function(){
                                                                                            if(xhr4.readyState===4&&xhr4.status===200){
                                                                                                let response7 = JSON.parse(xhr4.responseText)
                                                                                                console.log("当前的评论数为:",response7)
                                                                                                let totalComment=response7.data.length
                                                                                                console.log("当前评论数为:",totalComment)
                                                                                                let xhr5=new XMLHttpRequest()
                                                                                                xhr5.open(
                                                                                                    'GET',
                                                                                                    `http://43.136.111.27:8086/article/following-articles?current=1&size=10&followerId=${response4.data.userId}`
                                                                                                )
                                                                                                xhr5.setRequestHeader('Authorization',`${key}`)
                                                                                                xhr5.send()
                                                                                                xhr5.onreadystatechange=function(){
                                                                                                    if(xhr5.readyState===4&&xhr5.status===200){
                                                                                                        let response8 = JSON.parse(xhr5.responseText)
                                                                                                        console.log(response8)
                                                                                                        let totalArticles=response8.data.total
                                                                                                        console.log("当前的文章数是:",totalArticles)
                                                                                                        console.log("当前我关注的数组是:",followingArray)
                                                                                                        main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backTopersonal">返回个人中心</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${response3.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${response3.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${response3.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>

                                                                                        <!-- 评论 -->
                                                                                        <div class="action-item" style="color:#1E80FF">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-3 12H7v-2h10v2zm0-3H7V9h10v2zm0-3H7V6h10v2z"/>
                                                                                            </svg>
                                                                                            <div class="count">评论数:${totalComment}</div>

                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${response3.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${response3.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${response3.data.tags}</span>
                                                                                                <span>${response3.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 右侧用户信息 -->
                                                                                    <div class="user-sidebar">
                                                                                        <div class="user-card">
                                                                                            <div class="user-header"> <!-- 新增flex容器 -->
                                                                                                <img src="${response4.data.avatar}" class="user-avatar" style="width:60px;height:60px">
                                                                                                <div class="user-info">
                                                                                                    <h3>${response4.data.username}</h3>
                                                                                                    <p class="position">${response4.data.profession}</p>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="stats">
                                                                                                <div>
                                                                                                    <div class="number">${totalArticles}</div>
                                                                                                    <div class="label">文章</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${totalFollowing}</div>
                                                                                                    <div class="label">关注</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${totalFans}</div>
                                                                                                    <div class="label">粉丝</div>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="actions isFollow">
                                                                                                <button class="follow-btn prepareFollowing">关注</button>
                                                                                                <button class="message-btn">私信</button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                                                                                                        const isFollow=document.querySelector('.isFollow')
                                                                                                        let followStatus=followingArray.some(user=>user.userId===response4.data.userId)
                                                                                                        if(followStatus){
                                                                                                            isFollow.innerHTML=`
                                                                                                        <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                        <button class="message-btn">私信</button>
                                                                                                    `
                                                                                                        }

                                                                                                        isFollow.addEventListener('click',function (e){
                                                                                                            if(e.target.closest('.deleteFollowing')){
                                                                                                                isFollow.innerHTML=`
                                                                                                            <button class="follow-btn prepareFollowing">关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                                                followingArray = followingArray.filter(user => String(user.userId) !== String(response4.data.userId));
                                                                                                                console.log("当前的关注者数组是",followingArray)
                                                                                                                /*
                                                                                                                *
                                                                                                                * 在这里写请求就行
                                                                                                                *
                                                                                                                * */
                                                                                                                const data={
                                                                                                                    userId:response4.data.userId
                                                                                                                }
                                                                                                                let xhr = new XMLHttpRequest();
                                                                                                                xhr.open(
                                                                                                                    'POST',
                                                                                                                    `http://43.136.111.27:8086/user/unfollow`
                                                                                                                )
                                                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                                                xhr.setRequestHeader('Content-Type','application/json')
                                                                                                                xhr.send(JSON.stringify(data))
                                                                                                                xhr.onreadystatechange=function (){
                                                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                                                        console.log(xhr.response)
                                                                                                                    }
                                                                                                                }
                                                                                                            }

                                                                                                            if(e.target.closest('.prepareFollowing')){
                                                                                                                isFollow.innerHTML=`
                                                                                                            <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                                                followingArray.push(response4.data)
                                                                                                                console.log("当前的关注者数组是",followingArray)
                                                                                                                const data={
                                                                                                                    userId:response4.data.userId
                                                                                                                }

                                                                                                                /*
                                                                                                                * 在这里写请求就行
                                                                                                                *
                                                                                                                * */
                                                                                                                let xhr = new XMLHttpRequest();
                                                                                                                xhr.open(
                                                                                                                    'POST',
                                                                                                                    `http://43.136.111.27:8086/user/follow`
                                                                                                                )
                                                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                                                xhr.setRequestHeader('Content-Type','application/json')
                                                                                                                xhr.send(JSON.stringify(data))
                                                                                                                xhr.onreadystatechange=function (){
                                                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                                                        console.log(xhr.response)
                                                                                                                    }
                                                                                                                }

                                                                                                            }
                                                                                                        })

                                                                                                        const collectitem= document.querySelector('.collectitem')
                                                                                                        let collectstatus=collectArray.some(article=>article.articleId===response3.data.articleId)
                                                                                                        if(collectstatus){
                                                                                                            collectitem.innerHTML=`
                                                                                                        <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                            <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                        </svg>
                                                                                                        <div class="count">收藏数:${response3.data.collectCount}</div>
                                                                                                        <div class="count deleteCollect">(已收藏)</div>
                                                                                                    `
                                                                                                        }
                                                                                                        let currentcollect=response3.data.collectCount
                                                                                                        collectitem.addEventListener('click',function (e){
                                                                                                            if(e.target.closest('.deleteCollect')){
                                                                                                                currentcollect--
                                                                                                                collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                                        `
                                                                                                                collectArray=collectArray.filter(article=>String(article.articleId)!==String(response3.data.articleId))
                                                                                                                console.log("当前的收藏数组为",collectArray)
                                                                                                                /*
                                                                                                                *
                                                                                                                * 这里写取消关注按钮
                                                                                                                *
                                                                                                                * */
                                                                                                                let xhr= new XMLHttpRequest();
                                                                                                                xhr.open(
                                                                                                                    'POST',
                                                                                                                    `http://43.136.111.27:8086/article/uncollect/${response3.data.articleId}`
                                                                                                                )
                                                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                                                xhr.send()
                                                                                                                xhr.onreadystatechange=function (){
                                                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                                                        console.log("取消收藏的情况为:",xhr.response)
                                                                                                                    }
                                                                                                                }
                                                                                                            }
                                                                                                            if(e.target.closest('.prepareCollect')){
                                                                                                                currentcollect++
                                                                                                                collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count deleteCollect">(已收藏)</div>
                                                                                                        `
                                                                                                                collectArray.push(response3.data)
                                                                                                                console.log("当前的收藏数组是",collectArray)
                                                                                                                /*
                                                                                                                * 这里写收藏按钮
                                                                                                                *
                                                                                                                * */
                                                                                                                let xhr= new XMLHttpRequest();
                                                                                                                xhr.open(
                                                                                                                    'POST',
                                                                                                                    `http://43.136.111.27:8086/article/collect/${response3.data.articleId}`
                                                                                                                )
                                                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                                                xhr.send()
                                                                                                                xhr.onreadystatechange=function (){
                                                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                                                        console.log("收藏的情况为:",xhr.response)
                                                                                                                    }
                                                                                                                }
                                                                                                            }
                                                                                                        })


                                                                                                        const gooditem= document.querySelector('.gooditem')
                                                                                                        let goodstatus=likeArray.some(article=>article.articleId===response3.data.articleId)
                                                                                                        if(goodstatus){
                                                                                                            gooditem.innerHTML=`
                                                                                                       <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                       </svg>
                                                                                                       <div class="count">点赞数:${response3.data.likeCount}</div>
                                                                                                       <div class="count deletegood">(取消点赞)</div>
                                                                                                    `
                                                                                                        }
                                                                                                        let currentgood=response3.data.likeCount
                                                                                                        gooditem.addEventListener('click',function (e){

                                                                                                            if(e.target.closest('.deletegood')){
                                                                                                                currentgood--
                                                                                                                gooditem.innerHTML=`
                                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">点赞数:${currentgood}</div>
                                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                                        `
                                                                                                                likeArray=likeArray.filter(article => String(article.articleId)!==String(response3.data.articleId))
                                                                                                                console.log("当前的喜欢文章数组是",likeArray)
                                                                                                                let xhr = new XMLHttpRequest();
                                                                                                                xhr.open(
                                                                                                                    'POST',
                                                                                                                    `http://43.136.111.27:8086/article/unlike/${response3.data.articleId}`
                                                                                                                )
                                                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                                                xhr.send()
                                                                                                                xhr.onreadystatechange=function (){
                                                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                                                        console.log("取消点赞为:",xhr.response)
                                                                                                                    }
                                                                                                                }
                                                                                                            }

                                                                                                            if(e.target.closest('.preparegood')){
                                                                                                                currentgood++
                                                                                                                gooditem.innerHTML=`
                                                                                                           <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                    <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                           </svg>
                                                                                                           <div class="count">点赞数:${currentgood}</div>
                                                                                                           <div class="count deletegood">(取消点赞)</div>
                                                                                                        `
                                                                                                                likeArray.push(response3.data)
                                                                                                                console.log("当前的喜欢文章数组是",likeArray)
                                                                                                                let xhr = new XMLHttpRequest();
                                                                                                                xhr.open(
                                                                                                                    'POST',
                                                                                                                    `http://43.136.111.27:8086/article/like/${response3.data.articleId}`
                                                                                                                )
                                                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                                                xhr.send()
                                                                                                                xhr.onreadystatechange=function (){
                                                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                                                        console.log("点赞情况为:",xhr.response)
                                                                                                                    }
                                                                                                                }
                                                                                                            }
                                                                                                        })

                                                                                                    }
                                                                                                }

                                                                                            }
                                                                                        }
                                                                                    }
                                                                                }
                                                                            }
                                                                        }
                                                                        //这里能填充用户的粉丝数，关注数,但是很麻烦

                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                })
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            if(e.target.closest('.hisWork')){
                alert('他的作品被点击')
                console.log("当前的作品数组为?是否变化了?",hiswork)
                const articleContainer = document.querySelector('.articleContainer');
                articleContainer.innerHTML=``
                hiswork.forEach(item=>{
                    const div = document.createElement('div')
                    div.setAttribute('articleId', item.articleId)
                    div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                    articleContainer.appendChild(div)
                })
                articleContainer.addEventListener('click', function(e1) {
                    if(e1.target.closest('div[articleId]')){
                        const articleId=e1.target.closest('div[articleId]').getAttribute('articleId');
                        console.log("当前我点击的div是:",articleId)
                        alert('文章被点击'+articleId)
                        let xhr=new XMLHttpRequest()
                        xhr.open(
                            'GET',
                            `http://43.136.111.27:8086/article/detail/${articleId}`
                        )
                        xhr.setRequestHeader('Authorization',`${key}`)
                        xhr.send()
                        xhr.onreadystatechange=function(){
                            if(xhr.readyState===4&&xhr.status===200){
                                let response3 = JSON.parse(xhr.responseText)
                                console.log("当前获取到的文章内容是:",response3)
                                let xhr1=new XMLHttpRequest()
                                xhr1.open(
                                    'GET',
                                    `http://43.136.111.27:8086/creator/profile/${response3.data.userId}`
                                )
                                xhr1.setRequestHeader('Authorization',`${key}`)
                                xhr1.send()
                                xhr1.onreadystatechange=function(){
                                    if(xhr1.readyState===4&&xhr1.status===200){
                                        let response4 = JSON.parse(xhr1.responseText)
                                        console.log("获取到的用户信息是:",response4)
                                        //response4为创作者的个人信息
                                        let xhr2=new XMLHttpRequest()
                                        xhr2.open(
                                            'GET',
                                            `http://43.136.111.27:8086/creator/followers/${response4.data.userId}`
                                        )
                                        xhr2.setRequestHeader('Authorization',`${key}`)
                                        xhr2.send()
                                        xhr2.onreadystatechange=function(){
                                            if(xhr2.readyState===4&&xhr2.status===200){
                                                let response5 = JSON.parse(xhr2.responseText)
                                                console.log(response5)
                                                let totalFans= response5.data.total
                                                console.log("当前粉丝数为:",totalFans)
                                                let xhr3=new XMLHttpRequest()
                                                xhr3.open(
                                                    'GET',
                                                    `http://43.136.111.27:8086/creator/following/${response4.data.userId}`
                                                )
                                                xhr3.setRequestHeader('Authorization',`${key}`)
                                                xhr3.send()
                                                xhr3.onreadystatechange=function(){
                                                    if(xhr3.readyState===4&&xhr3.status===200){
                                                        let response6 = JSON.parse(xhr3.responseText)
                                                        console.log("当前的关注人数是:",response6)
                                                        let totalFollowing=response6.data.total
                                                        console.log("当前的关注者人数为:",totalFollowing)
                                                        let xhr4=new XMLHttpRequest()
                                                        xhr4.open(
                                                            'GET',
                                                            `http://43.136.111.27:8086/article/comment/list/${response3.data.articleId}`
                                                        )
                                                        xhr4.setRequestHeader('Authorization',`${key}`)
                                                        xhr4.send()
                                                        xhr4.onreadystatechange=function(){
                                                            if(xhr4.readyState===4&&xhr4.status===200){
                                                                let response7 = JSON.parse(xhr4.responseText)
                                                                console.log("当前的评论数为:",response7)
                                                                let totalComment=response7.data.length
                                                                console.log("当前评论数为:",totalComment)
                                                                let xhr5=new XMLHttpRequest()
                                                                xhr5.open(
                                                                    'GET',
                                                                    `http://43.136.111.27:8086/article/following-articles?current=1&size=10&followerId=${response4.data.userId}`
                                                                )
                                                                xhr5.setRequestHeader('Authorization',`${key}`)
                                                                xhr5.send()
                                                                xhr5.onreadystatechange=function(){
                                                                    if(xhr5.readyState===4&&xhr5.status===200){
                                                                        let response8 = JSON.parse(xhr5.responseText)
                                                                        console.log(response8)
                                                                        let totalArticles=response8.data.total
                                                                        console.log("当前的文章数是:",totalArticles)
                                                                        console.log("当前我关注的数组是:",followingArray)
                                                                        main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backTopersonal">返回个人中心</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${response3.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${response3.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${response3.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>

                                                                                        <!-- 评论 -->
                                                                                        <div class="action-item" style="color:#1E80FF">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-3 12H7v-2h10v2zm0-3H7V9h10v2zm0-3H7V6h10v2z"/>
                                                                                            </svg>
                                                                                            <div class="count">评论数:${totalComment}</div>

                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${response3.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${response3.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${response3.data.tags}</span>
                                                                                                <span>${response3.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 右侧用户信息 -->
                                                                                    <div class="user-sidebar">
                                                                                        <div class="user-card">
                                                                                            <div class="user-header"> <!-- 新增flex容器 -->
                                                                                                <img src="${response4.data.avatar}" class="user-avatar" style="width:60px;height:60px">
                                                                                                <div class="user-info">
                                                                                                    <h3>${response4.data.username}</h3>
                                                                                                    <p class="position">${response4.data.profession}</p>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="stats">
                                                                                                <div>
                                                                                                    <div class="number">${totalArticles}</div>
                                                                                                    <div class="label">文章</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${totalFollowing}</div>
                                                                                                    <div class="label">关注</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${totalFans}</div>
                                                                                                    <div class="label">粉丝</div>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="actions isFollow">
                                                                                                <button class="follow-btn prepareFollowing">关注</button>
                                                                                                <button class="message-btn">私信</button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                                                                        const isFollow=document.querySelector('.isFollow')
                                                                        let followStatus=followingArray.some(user=>user.userId===response4.data.userId)
                                                                        if(followStatus){
                                                                            isFollow.innerHTML=`
                                                                                                        <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                        <button class="message-btn">私信</button>
                                                                                                    `
                                                                        }

                                                                        isFollow.addEventListener('click',function (e){
                                                                            if(e.target.closest('.deleteFollowing')){
                                                                                isFollow.innerHTML=`
                                                                                                            <button class="follow-btn prepareFollowing">关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                followingArray = followingArray.filter(user => String(user.userId) !== String(response4.data.userId));
                                                                                console.log("当前的关注者数组是",followingArray)
                                                                                /*
                                                                                *
                                                                                * 在这里写请求就行
                                                                                *
                                                                                * */
                                                                                const data={
                                                                                    userId:response4.data.userId
                                                                                }
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/user/unfollow`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.setRequestHeader('Content-Type','application/json')
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log(xhr.response)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e.target.closest('.prepareFollowing')){
                                                                                isFollow.innerHTML=`
                                                                                                            <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                followingArray.push(response4.data)
                                                                                console.log("当前的关注者数组是",followingArray)
                                                                                const data={
                                                                                    userId:response4.data.userId
                                                                                }

                                                                                /*
                                                                                * 在这里写请求就行
                                                                                *
                                                                                * */
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/user/follow`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.setRequestHeader('Content-Type','application/json')
                                                                                xhr.send(JSON.stringify(data))
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log(xhr.response)
                                                                                    }
                                                                                }

                                                                            }
                                                                        })

                                                                        const collectitem= document.querySelector('.collectitem')
                                                                        let collectstatus=collectArray.some(article=>article.articleId===response3.data.articleId)
                                                                        if(collectstatus){
                                                                            collectitem.innerHTML=`
                                                                                                        <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                            <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                        </svg>
                                                                                                        <div class="count">收藏数:${response3.data.collectCount}</div>
                                                                                                        <div class="count deleteCollect">(已收藏)</div>
                                                                                                    `
                                                                        }
                                                                        let currentcollect=response3.data.collectCount
                                                                        collectitem.addEventListener('click',function (e){

                                                                            if(e.target.closest('.deleteCollect')){
                                                                                currentcollect--
                                                                                collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                                        `
                                                                                collectArray=collectArray.filter(article=>String(article.articleId)!==String(response3.data.articleId))
                                                                                console.log("当前的收藏数组为",collectArray)
                                                                                /*
                                                                                *
                                                                                * 这里写取消关注按钮
                                                                                *
                                                                                * */
                                                                                let xhr= new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/uncollect/${response3.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("取消收藏的情况为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }
                                                                            if(e.target.closest('.prepareCollect')){
                                                                                currentcollect++
                                                                                collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count deleteCollect">(已收藏)</div>
                                                                                                        `
                                                                                collectArray.push(response3.data)
                                                                                console.log("当前的收藏数组是",collectArray)
                                                                                /*
                                                                                * 这里写收藏按钮
                                                                                *
                                                                                * */
                                                                                let xhr= new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/collect/${response3.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("收藏的情况为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }
                                                                        })


                                                                        const gooditem= document.querySelector('.gooditem')
                                                                        let goodstatus=likeArray.some(article=>article.articleId===response3.data.articleId)
                                                                        if(goodstatus){
                                                                            gooditem.innerHTML=`
                                                                                                       <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                       </svg>
                                                                                                       <div class="count">点赞数:${response3.data.likeCount}</div>
                                                                                                       <div class="count deletegood">(取消点赞)</div>
                                                                                                    `
                                                                        }
                                                                        let currentgood=response3.data.likeCount
                                                                        gooditem.addEventListener('click',function (e){

                                                                            if(e.target.closest('.deletegood')){
                                                                                currentgood--
                                                                                gooditem.innerHTML=`
                                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">点赞数:${currentgood}</div>
                                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                                        `
                                                                                likeArray=likeArray.filter(article => String(article.articleId)!==String(response3.data.articleId))
                                                                                console.log("当前的喜欢文章数组是",likeArray)
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/unlike/${response3.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("取消点赞为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }

                                                                            if(e.target.closest('.preparegood')){
                                                                                currentgood++
                                                                                gooditem.innerHTML=`
                                                                                                           <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                    <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                           </svg>
                                                                                                           <div class="count">点赞数:${currentgood}</div>
                                                                                                           <div class="count deletegood">(取消点赞)</div>
                                                                                                        `
                                                                                likeArray.push(response3.data)
                                                                                console.log("当前的喜欢文章数组是",likeArray)
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'POST',
                                                                                    `http://43.136.111.27:8086/article/like/${response3.data.articleId}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        console.log("点赞情况为:",xhr.response)
                                                                                    }
                                                                                }
                                                                            }
                                                                        })

                                                                    }
                                                                }

                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        //这里能填充用户的粉丝数，关注数,但是很麻烦

                                    }
                                }
                            }
                        }
                    }
                })
            }

            if(e.target.closest('.hisfollower')){
                alert('他的关注被点击')
                console.log("当前的关注数组为?是否变化了?",hisFollower)
                const articleContainer = document.querySelector('.articleContainer');
                articleContainer.innerHTML=``
                hisFollower.forEach(item=>{
                    const div = document.createElement('div')
                    div.setAttribute('userId', item.userId)
                    let followStatus=followingArray.some(user=>user.userId===item.userId)
                    if(followStatus){
                        div.innerHTML = `
                        <div class="tech-item">
                            <div class="tech-left">
                                <div class="tech-icon css-icon">
                                       <img src="${item.avatar}" alt="" style="width: 100%; height: 100%" class="SeeHisPage">
                                </div>
                                <span class="tech-name">${item.username}</span>
                            </div>
                            <button class="follow-btn1 deleteFollow">已关注</button>
                        </div>
                    `
                    }
                    else{
                        div.innerHTML = `
                        <div class="tech-item">
                            <div class="tech-left">
                                <div class="tech-icon css-icon">
                                       <img src="${item.avatar}" alt="" style="width: 100%; height: 100%" class="SeeHisPage">
                                </div>
                                <span class="tech-name">${item.username}</span>
                            </div>
                            <button class="follow-btn1 prepareFollow">关注</button>
                        </div>`
                    }
                    articleContainer.appendChild(div)
                })
            }

            if(e.target.closest('.hisFans')){
                alert('他的粉丝被点击')
                const articleContainer = document.querySelector('.articleContainer');
                articleContainer.innerHTML=``
                console.log("当前的粉丝数组为?是否变化了?",hisFans)
                hisFans.forEach(item=>{
                    const div = document.createElement('div')
                    div.setAttribute('userId', item.userId)
                    let followStatus=followingArray.some(user=>user.userId===item.userId)
                    if(followStatus){
                        div.innerHTML = `
                        <div class="tech-item">
                            <div class="tech-left">
                                <div class="tech-icon css-icon">
                                       <img src="${item.avatar}" alt="" style="width: 100%; height: 100%" class="SeeHisPage">
                                </div>
                                <span class="tech-name">${item.username}</span>
                            </div>
                            <button class="follow-btn1 deleteFollow">已关注</button>
                        </div>
                    `
                    }
                    else{
                        div.innerHTML = `
                        <div class="tech-item">
                            <div class="tech-left">
                                <div class="tech-icon css-icon">
                                       <img src="${item.avatar}" alt="" style="width: 100%; height: 100%" class="SeeHisPage">
                                </div>
                                <span class="tech-name">${item.username}</span>
                            </div>
                            <button class="follow-btn1 prepareFollow">关注</button>
                        </div>`
                    }
                    articleContainer.appendChild(div)
                })
            }

            if(e.target.closest('.prepareFollow')){
                alert('关注被点击')
                const item=e.target.closest('div[userId]')
                //得根据userId来获取信息才行
                const userId=item.getAttribute('userId')
                alert('你当前点击的userId是:' + userId)
                const button = e.target.closest('.prepareFollow');
                button.innerHTML = "已关注";
                button.classList.remove('prepareFollow');
                button.classList.add('deleteFollow');
                const data={
                    userId:userId,
                }
                let xhr = new XMLHttpRequest();
                xhr.open(
                    'POST',
                    `http://43.136.111.27:8086/user/follow`
                )
                xhr.setRequestHeader('Content-Type', 'application/json')
                xhr.setRequestHeader('Authorization',`${key}`)
                xhr.send(JSON.stringify(data))
                xhr.onreadystatechange=function (){
                    if(xhr.readyState===4&&xhr.status===200){
                        let response = JSON.parse(xhr.responseText);
                        console.log("关注情况为:",response)
                        let xhr2 = new XMLHttpRequest();
                        xhr2.open(
                            'GET',
                            `http://43.136.111.27:8086/creator/profile/${userId}`
                        )
                        xhr2.setRequestHeader('Authorization',`${key}`)
                        xhr2.send()
                        xhr2.onreadystatechange=function (){
                            if(xhr2.readyState===4&&xhr2.status===200){
                                let response2 = JSON.parse(xhr2.responseText);
                                console.log("当前的关注者信息是",response2)
                                followingArray.push(response2.data)
                                console.log("当前的关注者数组是",followingArray)
                            }
                        }
                    }
                }
            }
        })

        document.addEventListener('click',function (e1){
            if(e1.target.closest('.backFirstPage22')){
                main.innerHTML=`
           <!-- 左侧分类 -->
    <div class="left-side">
        <div class="category-list">
            <button class="active">综合</button>
            <button>后端</button>
            <button>前端</button>
            <button>Android</button>
            <button>iOS</button>
            <button>人工智能</button>
            <button>工具工人</button>
            <button>代码人生</button>
            <button>阅读</button>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="tab-buttons">
            <button class="tab-button active recommendArticle">推荐</button>
            <button class="tab-button newArticle">最新</button>
            <button class="tab-button TopArticle">Top</button>
        </div>
        <div class="articleContainer2">

        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="right-side">
        <div class="right-card">
            <div class="greeting-section">
                <h3>上午好！</h3>
                <button class="signin-btn">去签到</button>
            </div>
            <div class="rank-section">
                <h4>热门文章榜</h4>
                <ul class="rank-list">

                </ul>
            </div>
            <div class="carousel">
                <div class="ctrl-arrow arrow-left"></div>
                <div class="ctrl-arrow arrow-right"></div>

                <!-- 双向克隆结构 [1,6](@ref) -->
                <div class="slider-track">
                    <!-- 克隆最后一张到开头 -->
                    <div class="slide"><img src="../image/1.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                    <!-- 原始图片 -->
                    <div class="slide"><img src="../image/2.webp" alt="图片1" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/3.webp" alt="图片2" style="width: 100%;height: 100%"></div>
                    <div class="slide"><img src="../image/1.webp" alt="图片3" style="width: 100%;height: 100%"></div>
                    <!-- 克隆第一张到末尾 -->
                    <div class="slide"><img src="../image/2.webp" alt="克隆图" style="width: 100%;height: 100%"></div>
                </div>

                <div class="indicator-dots"></div>
            </div>
        </div>
    </div>
        `
                const articleContainer2=document.querySelector('.articleContainer2')
                articleContainer2.innerHTML=``
                const rankList=document.querySelector('.rank-list')
                rankList.innerHTML=''
                recommendArticle.forEach((item,index) => {
                    const div = document.createElement('div')
                    div.setAttribute('articleId', item.articleId)
                    div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${index+1}:${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                    articleContainer2.appendChild(div)
                    const li=document.createElement('li')
                    li.innerHTML=`${index+1}:${item.title}`
                    rankList.appendChild(li)
                })
                // 完整交互逻辑
                document.querySelectorAll('.nav-button').forEach(button => {
                    button.addEventListener('click', function() {
                        document.querySelectorAll('.nav-button').forEach(btn => btn.classList.remove('active'));
                        this.classList.add('active');
                    });
                });

                document.querySelectorAll('.category-list button').forEach(button => {
                    button.addEventListener('click', function() {
                        document.querySelectorAll('.category-list button').forEach(btn => btn.classList.remove('active'));
                        this.classList.add('active');
                    });
                });

                document.querySelectorAll('.tab-button').forEach(button => {
                    button.addEventListener('click', function() {
                        document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
                        this.classList.add('active');
                    });
                });

                // 配置参数 [5,7](@ref)
                const CONFIG = {
                    autoPlayInterval: 5000,    // 自动播放间隔
                    transitionDuration: 600,  // 过渡动画时间
                    cloneSwitchDelay: 500      // 克隆图切换延迟
                };

                // DOM元素初始化
                const track = document.querySelector('.slider-track');
                const dotsContainer = document.querySelector('.indicator-dots');
                const [leftBtn, rightBtn] = document.querySelectorAll('.ctrl-arrow');

                let currentIndex = 1;          // 当前索引（从真实第一张开始）
                const realCount = 3;           // 真实图片数量
                const totalSlides = realCount + 2; // 包含克隆图总数

                // 初始化指示点 [2,8](@ref)
                function createDots() {
                    for(let i=0; i<realCount; i++) {
                        const dot = document.createElement('div');
                        dot.className = `dot ${i===0 ? 'active' : ''}`;
                        dot.addEventListener('click', () => goToSlide(i));
                        dotsContainer.appendChild(dot);
                    }
                }

                // 核心切换逻辑 [1,6](@ref)
                function updateSlider() {
                    track.style.transform = `translateX(-${currentIndex * 100}%)`;
                    updateDots();
                }

                // 边界处理优化 [6,7](@ref)
                function handleBoundary() {
                    if(currentIndex <= 0) {
                        setTimeout(() => {
                            track.style.transition = 'none';
                            currentIndex = realCount;
                            track.style.transform = `translateX(-${currentIndex * 100}%)`;
                            void track.offsetWidth; // 强制重绘
                            track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
                        }, CONFIG.cloneSwitchDelay);
                    }
                    else if(currentIndex >= totalSlides - 1) {
                        setTimeout(() => {
                            track.style.transition = 'none';
                            currentIndex = 1;
                            track.style.transform = `translateX(-${currentIndex * 100}%)`;
                            void track.offsetWidth;
                            track.style.transition = `transform ${CONFIG.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
                        }, CONFIG.cloneSwitchDelay);
                    }
                }

                // 指示点状态更新 [2](@ref)
                function updateDots() {
                    const realIndex = (currentIndex - 1 + realCount) % realCount;
                    document.querySelectorAll('.dot').forEach((dot, index) => {
                        dot.classList.toggle('active', index === realIndex);
                    });
                }

                // 导航控制 [6](@ref)
                leftBtn.addEventListener('click', () => {
                    currentIndex--;
                    handleBoundary();
                    updateSlider();
                    resetAutoPlay();
                });

                rightBtn.addEventListener('click', () => {
                    currentIndex++;
                    handleBoundary();
                    updateSlider();
                    resetAutoPlay();
                });

                // 跳转指定位置 [2,8](@ref)
                function goToSlide(index) {
                    currentIndex = index + 1;
                    handleBoundary();
                    updateSlider();
                    resetAutoPlay();
                }

                // 自动播放优化 [5,7](@ref)
                let autoTimer;
                function startAutoPlay() {
                    autoTimer = setInterval(() => {
                        currentIndex++;
                        if(currentIndex === realCount) { // 最后真实图片延长展示
                            setTimeout(() => {
                                handleBoundary();
                                updateSlider();
                            }, 1000);
                        } else {
                            handleBoundary();
                            updateSlider();
                        }
                    }, CONFIG.autoPlayInterval);
                }

                function resetAutoPlay() {
                    clearInterval(autoTimer);
                    startAutoPlay();
                }

                // 过渡结束监听 [6](@ref)
                track.addEventListener('transitionend', () => {
                    if(currentIndex <= 0 || currentIndex >= totalSlides - 1) {
                        handleBoundary();
                    }
                });

                // 初始化执行
                createDots();
                startAutoPlay();

                articleContainer2.addEventListener('click',function (event){
                    if(event.target.closest('div[articleId]')){
                        const articleId=event.target.closest('div[articleId]').getAttribute('articleId')
                        let xhr=new XMLHttpRequest()
                        xhr.open(
                            'GET',
                            `http://43.136.111.27:8086/article/detail/${articleId}`
                        )
                        xhr.setRequestHeader('Authorization',``)
                        xhr.send()
                        xhr.onreadystatechange=function (){
                            if(xhr.readyState===4&&xhr.status===200){
                                let detailresponse=JSON.parse(xhr.responseText)
                                console.log("获取到的文章详情是",detailresponse)
                                if(isLogin==1){
                                    alert('你已经登录')
                                    /*
                                    * 这是获取用户信息，因为不需要渲染评论，所以只用获取到个人信息和他的作品,他的粉丝，他的关注者就够了
                                    * */
                                    /*
                                    * 失败，没有token根本查看别人的个人信息
                                    *
                                    * */
                                    let xhr2=new XMLHttpRequest()
                                    xhr2.open(
                                        'GET',
                                        `http://43.136.111.27:8086/creator/profile/${detailresponse.data.userId}`
                                    )
                                    xhr2.setRequestHeader('Authorization',`${key}`)
                                    xhr2.send()
                                    xhr2.onreadystatechange=function (){
                                        if(xhr2.readyState===4&&xhr2.status===200){
                                            let response2=JSON.parse(xhr2.responseText)
                                            console.log("获取到的用户信息是:",response2)
                                            let xhr3=new XMLHttpRequest()
                                            xhr3.open(
                                                'GET',
                                                `http://43.136.111.27:8086/creator/following/${detailresponse.data.userId}`
                                            )
                                            xhr3.setRequestHeader('Authorization',`${key}`)
                                            xhr3.send()
                                            xhr3.onreadystatechange=function (){
                                                if(xhr3.readyState===4&&xhr3.status===200){
                                                    let response3=JSON.parse(xhr3.responseText)
                                                    console.log("当前创作者的关注信息是:",response3)
                                                    let xhr4=new XMLHttpRequest()
                                                    xhr4.open(
                                                        'GET',
                                                        `http://43.136.111.27:8086/creator/followers/${detailresponse.data.userId}`
                                                    )
                                                    xhr4.setRequestHeader('Authorization',`${key}`)
                                                    xhr4.send()
                                                    xhr4.onreadystatechange=function (){
                                                        if(xhr4.readyState===4&&xhr4.status===200){
                                                            let response4=JSON.parse(xhr4.responseText)
                                                            console.log("当前创作者的粉丝是:",response4)
                                                            let xhr5=new XMLHttpRequest()
                                                            xhr5.open(
                                                                'GET',
                                                                `http://43.136.111.27:8086/article/following-articles?followerId=${detailresponse.data.userId}`
                                                            )
                                                            xhr5.setRequestHeader('Authorization',`${key}`)
                                                            xhr5.send()
                                                            xhr5.onreadystatechange=function (){
                                                                if(xhr5.readyState===4&&xhr5.status===200){
                                                                    let response5=JSON.parse(xhr5.responseText)
                                                                    console.log("当前他的作品为:",response5)
                                                                    let xhr6=new XMLHttpRequest()
                                                                    xhr6.open(
                                                                        'GET',
                                                                        `http://43.136.111.27:8086/article/comment/list/${articleId}`
                                                                    )
                                                                    xhr6.setRequestHeader('Authorization',`${key}`)
                                                                    xhr6.send()
                                                                    xhr6.onreadystatechange=function (){
                                                                        if(xhr6.readyState===4&&xhr6.status===200){
                                                                            let response6=JSON.parse(xhr6.responseText)
                                                                            console.log("当前的评论为",response6)
                                                                            main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backFirstPage22">返回首页</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${detailresponse.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>

                                                                                        <!-- 评论 -->
                                                                                        <div class="action-item" style="color:#1E80FF">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-3 12H7v-2h10v2zm0-3H7V9h10v2zm0-3H7V6h10v2z"/>
                                                                                            </svg>
                                                                                            <div class="count">评论数:${response6.data.length}</div>

                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${detailresponse.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${detailresponse.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${detailresponse.data.tags}</span>
                                                                                                <span>${detailresponse.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="CommentContainer">
                                                                                            <div class="createComment">
                                                                                                <h6>来发布你的评论吧</h6>
                                                                                                <div><input type="text" class="nullContent" placeholder="请输入文本"></div>
                                                                                                <div><input type="text" class="nullimageUrl" placeholder="请输入图片网址"></div>
                                                                                                <div><button class="submitnull">发布</button></div>
                                                                                            </div>
                                                                                            <div class="createBackComment" style="display: none">
                                                                                                <h6>来发布你的回复吧</h6>
                                                                                                <div><input type="text" class="parContent" placeholder="请输入回复文本"></div>
                                                                                                <div><input type="text" class="parimageUrl" placeholder="请输入回复图片网址"></div>
                                                                                                <div><button class="submitpar">发布</button></div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 右侧用户信息 -->
                                                                                    <div class="user-sidebar">
                                                                                        <div class="user-card">
                                                                                            <div class="user-header"> <!-- 新增flex容器 -->
                                                                                                <img src="${response2.data.avatar}" class="user-avatar" style="width:60px;height:60px">
                                                                                                <div class="user-info">
                                                                                                    <h3>${response2.data.username}</h3>
                                                                                                    <p class="position">${response2.data.profession}</p>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="stats">
                                                                                                <div>
                                                                                                    <div class="number">${response5.data.records.length}</div>
                                                                                                    <div class="label">文章</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response3.data.records.length}</div>
                                                                                                    <div class="label">关注</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response4.data.records.length}</div>
                                                                                                    <div class="label">粉丝</div>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="actions isFollow">
                                                                                                <button class="follow-btn prepareFollowing">关注</button>
                                                                                                <button class="message-btn">私信</button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                                                                            const isFollow=document.querySelector('.isFollow')
                                                                            let followStatus=followingArray.some(user=>user.userId===detailresponse.data.userId)
                                                                            if(followStatus){
                                                                                isFollow.innerHTML=`
                                                                                                        <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                        <button class="message-btn">私信</button>
                                                                                                    `
                                                                            }

                                                                            isFollow.addEventListener('click',function (e){
                                                                                if(e.target.closest('.deleteFollowing')){
                                                                                    isFollow.innerHTML=`
                                                                                                            <button class="follow-btn prepareFollowing">关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                    followingArray = followingArray.filter(user => String(user.userId) !== String(detailresponse.data.userId));
                                                                                    console.log("当前的关注者数组是",followingArray)
                                                                                    /*
                                                                                    *
                                                                                    * 在这里写请求就行
                                                                                    *
                                                                                    * */
                                                                                    const data={
                                                                                        userId:detailresponse.data.userId
                                                                                    }
                                                                                    let xhr = new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/user/unfollow`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.setRequestHeader('Content-Type','application/json')
                                                                                    xhr.send(JSON.stringify(data))
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log(xhr.response)
                                                                                        }
                                                                                    }
                                                                                }

                                                                                if(e.target.closest('.prepareFollowing')){
                                                                                    isFollow.innerHTML=`
                                                                                                            <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                    followingArray.push(response2.data)
                                                                                    console.log("当前的关注者数组是",followingArray)
                                                                                    const data={
                                                                                        userId:response2.data.userId
                                                                                    }

                                                                                    /*
                                                                                    * 在这里写请求就行
                                                                                    *
                                                                                    * */
                                                                                    let xhr = new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/user/follow`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.setRequestHeader('Content-Type','application/json')
                                                                                    xhr.send(JSON.stringify(data))
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log(xhr.response)
                                                                                        }
                                                                                    }

                                                                                }
                                                                            })

                                                                            const collectitem= document.querySelector('.collectitem')
                                                                            let collectstatus=collectArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                            if(collectstatus){
                                                                                collectitem.innerHTML=`
                                                                                                        <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                            <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                        </svg>
                                                                                                        <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                                        <div class="count deleteCollect">(已收藏)</div>
                                                                                                    `
                                                                            }
                                                                            let currentcollect=detailresponse.data.collectCount
                                                                            collectitem.addEventListener('click',function (e){

                                                                                if(e.target.closest('.deleteCollect')){
                                                                                    currentcollect--
                                                                                    collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                                        `
                                                                                    collectArray=collectArray.filter(article=>String(article.articleId)!==String(detailresponse.data.articleId))
                                                                                    console.log("当前的收藏数组为",collectArray)
                                                                                    /*
                                                                                    *
                                                                                    * 这里写取消关注按钮
                                                                                    *
                                                                                    * */
                                                                                    let xhr= new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/uncollect/${detailresponse.data.articleId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("取消收藏的情况为:",xhr.response)
                                                                                        }
                                                                                    }
                                                                                }
                                                                                if(e.target.closest('.prepareCollect')){
                                                                                    currentcollect++
                                                                                    collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count deleteCollect">(已收藏)</div>
                                                                                                        `
                                                                                    collectArray.push(detailresponse.data)
                                                                                    console.log("当前的收藏数组是",collectArray)
                                                                                    /*
                                                                                    * 这里写收藏按钮
                                                                                    *
                                                                                    * */
                                                                                    let xhr= new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/collect/${detailresponse.data.articleId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("收藏的情况为:",xhr.response)
                                                                                        }
                                                                                    }
                                                                                }
                                                                            })


                                                                            const gooditem= document.querySelector('.gooditem')
                                                                            let goodstatus=likeArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                            if(goodstatus){
                                                                                gooditem.innerHTML=`
                                                                                                       <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                       </svg>
                                                                                                       <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                                       <div class="count deletegood">(取消点赞)</div>
                                                                                                    `
                                                                            }
                                                                            let currentgood=detailresponse.data.likeCount
                                                                            gooditem.addEventListener('click',function (e){
                                                                                if(e.target.closest('.deletegood')){
                                                                                    currentgood--
                                                                                    gooditem.innerHTML=`
                                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">点赞数:${currentgood}</div>
                                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                                        `
                                                                                    likeArray=likeArray.filter(article => String(article.articleId)!==String(detailresponse.data.articleId))
                                                                                    console.log("当前的喜欢文章数组是",likeArray)
                                                                                    let xhr = new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/unlike/${detailresponse.data.articleId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("取消点赞为:",xhr.response)
                                                                                        }
                                                                                    }
                                                                                }
                                                                                if(e.target.closest('.preparegood')){
                                                                                    currentgood++
                                                                                    gooditem.innerHTML=`
                                                                                                           <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                    <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                           </svg>
                                                                                                           <div class="count">点赞数:${currentgood}</div>
                                                                                                           <div class="count deletegood">(取消点赞)</div>
                                                                                                        `
                                                                                    likeArray.push(detailresponse.data)
                                                                                    console.log("当前的喜欢文章数组是",likeArray)
                                                                                    let xhr = new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/like/${detailresponse.data.articleId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("点赞情况为:",xhr.response)
                                                                                        }
                                                                                    }
                                                                                }
                                                                            })

                                                                            console.log("当前的77999评论为:",response6)
                                                                            const commentContainer=document.querySelector('.CommentContainer')
                                                                            response6.data.forEach(item => {
                                                                                //判断这个文章的父亲id为0同时这个评论的
                                                                                console.log("这个评论898是",item)
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'GET',
                                                                                    `http://43.136.111.27:8086/creator/profile/${item.commentUser}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        let response14=JSON.parse(xhr.responseText)
                                                                                        console.log("当前评论的用户信息是",response14.data)
                                                                                        if(item.parentId==null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            console.log("当前的这个评论div是",div)
                                                                                            commentContainer.appendChild(div)
                                                                                        }
                                                                                        if(item.parentId==null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            console.log("当前的这个评论div是",div)
                                                                                            commentContainer.appendChild(div)
                                                                                        }
                                                                                        if(item.parentId!=null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                            console.log("这个孩子评论为:",div)
                                                                                            console.log("选中的父亲id是",item.parentId)
                                                                                            console.log("选中的父亲元素是",parentdiv)
                                                                                            const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                            childrenComment.appendChild(div)
                                                                                        }
                                                                                        if(item.parentId!=null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                            console.log("选中的父亲元素是",parentdiv)
                                                                                            const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                            childrenComment.appendChild(div)
                                                                                        }
                                                                                    }
                                                                                }

                                                                            })

                                                                            let parentId=null
                                                                            commentContainer.addEventListener('click',function (e1){
                                                                                if(e1.target.closest('.backComment1')){
                                                                                    alert('回复评论被点击')
                                                                                    const div=e1.target.closest('div[commentId]')
                                                                                    parentId=div.getAttribute('commentId')
                                                                                    console.log("当前回复的父亲id是:",parentId)
                                                                                    const createBackComment=document.querySelector('.createBackComment')
                                                                                    createBackComment.style.display='block'
                                                                                }

                                                                                if(e1.target.closest('.submitpar')){
                                                                                    alert('提交回复被点击')
                                                                                    const parContent=document.querySelector('.parContent').value
                                                                                    const parimageUrl=document.querySelector('.parimageUrl').value
                                                                                    const data={
                                                                                        articleId:detailresponse.data.articleId,
                                                                                        content:parContent,
                                                                                        imageUrl:parimageUrl,
                                                                                        parentId:parentId,
                                                                                    }
                                                                                    console.log("当前发送的数据是:",data)
                                                                                    // 清空输入框并隐藏
                                                                                    document.querySelector('.parContent').value = '';
                                                                                    document.querySelector('.parimageUrl').value = '';
                                                                                    document.querySelector('.createBackComment').style.display = 'none';
                                                                                    //在这里服务器确实返回了commentId
                                                                                    let xhr = new XMLHttpRequest()
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/comment/add`
                                                                                    )
                                                                                    xhr.setRequestHeader('Content-Type', 'application/json')
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send(JSON.stringify(data))
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            let response16=JSON.parse(xhr.responseText)
                                                                                            console.log("发送评论情况为:",response16)
                                                                                            const formatTime = () => {
                                                                                                const now = new Date();
                                                                                                const year = now.getFullYear();
                                                                                                const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                                const day = String(now.getDate()).padStart(2, '0');
                                                                                                const hours = String(now.getHours()).padStart(2, '0');
                                                                                                const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                                const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                            };
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            const parentdiv=document.querySelector(`.commentItem[commentId="${data.parentId}"]`)
                                                                                            console.log("这个孩子评论为:",div)
                                                                                            console.log("选中的父亲id是",data.parentId)
                                                                                            console.log("选中的父亲元素是",parentdiv)
                                                                                            const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                            childrenComment.appendChild(div)
                                                                                        }
                                                                                    }
                                                                                }

                                                                                if(e1.target.closest('.deleteComment')){
                                                                                    alert('删除按钮被点击')
                                                                                    const div=e1.target.closest('.commentItem[commentId]')
                                                                                    //这里是选父亲元素
                                                                                    commentId=div.getAttribute('commentId')
                                                                                    console.log("当前删除的最近元素id是:",commentId)
                                                                                    div.remove()
                                                                                    let xhr = new XMLHttpRequest()
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/comment/delete/${commentId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("删除情况为:",xhr.responseText)
                                                                                        }
                                                                                    }
                                                                                }

                                                                                if(e1.target.closest('.submitnull')){
                                                                                    alert('提交评论被点击')
                                                                                    const nullContent=document.querySelector('.nullContent').value
                                                                                    const nullimageUrl=document.querySelector('.nullimageUrl').value
                                                                                    const data={
                                                                                        articleId:detailresponse.data.articleId,
                                                                                        content:nullContent,
                                                                                        imageUrl:nullimageUrl,
                                                                                        parentId:null
                                                                                    }
                                                                                    console.log("上传的null数据是",data)
                                                                                    let xhr = new XMLHttpRequest()
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/comment/add`
                                                                                    )
                                                                                    xhr.setRequestHeader('Content-Type', 'application/json')
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send(JSON.stringify(data))
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            let response16=JSON.parse(xhr.responseText)
                                                                                            console.log("发送null评论情况为:",response16)
                                                                                            const formatTime = () => {
                                                                                                const now = new Date();
                                                                                                const year = now.getFullYear();
                                                                                                const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                                const day = String(now.getDate()).padStart(2, '0');
                                                                                                const hours = String(now.getHours()).padStart(2, '0');
                                                                                                const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                                const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                            };
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            commentContainer.appendChild(div)
                                                                                        }
                                                                                    }
                                                                                }
                                                                            })

                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                })
            }

            if(e1.target.closest('.createCenter')){
                alert('创作者中心被点击')
                main.innerHTML=`
                    <div>
                        <header class="top-bar5">
                            <div class="user-info5">
                                <div class="user-avatar5">
                                    <img src="${userdata.avatar}" style="width: 100%;height: 100%">
                                </div>
                                <span>${userdata.username}</span>
                            </div>
                        </header>
                        <div class="main-container5">
                            <!-- 左侧导航 -->
                            <nav class="nav-panel5">
                            <div class="nav-item5 active5 createArticle">创作文章</div>
                            <div class="nav-item5 updateArticle">更新文章</div>
                            <div class="nav-item5 deleteArticle">删除文章</div>
                            <div class="nav-item5">
                                创作者列表
                                <input type="text" placeholder="输入创作者..." style="width: 90%;height: 20%" class="creatorList">
                            </div>
                            <div class="nav-item5">
                                搜索最热文章
                                <input type="text" placeholder="输入文章标题..." class="hottestArticle">
                            </div>
                            <div class="nav-item5">
                                搜索最新文章
                                <input type="text" placeholder="输入文章标题..." class="newestArticle">
                            </div>
                            <div class="nav-item5">
                                搜索用户
                                <input type="text" placeholder="输入要查询的用户名..." class="searchUser">
                            </div>
                        </nav>

                            <!-- 右侧编辑区 -->
                            <main class="editor-panel5" style="margin-top: 0">
                            <div class="editor-header5">
                                <input type="text" class="article-title5 articleTitle" placeholder="输入文章标题...">
                            </div>

                            <input type="url" class="cover-input5 articleCoverUrl" placeholder="封面图片URL（请输入图片地址）">

                            <input type="text" class="cover-input5 articleSummary" placeholder="文章概要">

                            <input type="text" class="cover-input5 articleLabelId" placeholder="文章id">

                            <input type="text" class="cover-input5 articleTags" placeholder="文章标签">

                            <div class="toolbar5">
                                <button>B</button>
                                <button>I</button>
                                <button>“</button>
                                <button>🔗</button>
                                <button>📷</button>
                                <button>{} </button>
                                <button>≡</button>
                            </div>

                            <div class="editor-content5">
                                <textarea placeholder="开始撰写文章内容..." style="width: 100%;max-width: 100%;height: 100%;max-height: 100%" class="articleContent"></textarea>
                            </div>

                            <div class="status-bar5">
                                <div>字符数：0 | 行数：1</div>
                                <div>
                                    <button style="background:#1a73e8; color:white; padding:8px 24px" class="submitArticle">发布</button>
                                </div>
                            </div>
                        </main>
                        </div>
                    </div>
                `
                const navItems5 = document.querySelectorAll('.nav-item5')
                navItems5.forEach(item => {
                    item.addEventListener('click', function() {
                        navItems5.forEach(nav => nav.classList.remove('active5'))
                        this.classList.add('active5')
                    })
                })

                // 字符统计
                const textarea5 = document.querySelector('textarea')
                textarea5.addEventListener('input', () => {
                    const charCount = textarea5.value.length
                    const lineCount = textarea5.value.split('\n').length
                    document.querySelector('.status-bar5 div:first-child').innerHTML =
                        `字符数：${charCount} | 行数：${lineCount}`
                })

                const editorPanel5=document.querySelector('.editor-panel5')
                editorPanel5.addEventListener('click',function (event){
                    if(event.target.closest('.prepareUpdate')){
                        event.stopPropagation(); // 阻止冒泡
                        alert('准备更新被点击');
                        const button = event.target.closest('.prepareUpdate');
                        const articleDiv = button.closest('[articleId]'); // 获取最近的 articleId 容器
                        const articleId = articleDiv.getAttribute('articleId');
                        const article = mywork1.find(item => item.articleId == articleId); // 查找文章数据
                        // 动态生成编辑面板
                        const editorPanel5 = document.querySelector('.editor-panel5');
                        editorPanel5.innerHTML = `
        <div class="editor-header5">
            <input type="text" class="article-title5 updateTitle" placeholder="输入文章标题..." value="${article.title}">
        </div>
        <input type="url" class="cover-input5 updateCoverUrl" placeholder="封面图片URL（请输入图片地址）" value="${article.coverUrl}">
        <input type="text" class="cover-input5 updateSummary" placeholder="文章概要" value="${article.summary}">
        <input type="text" class="cover-input5 updateLabelId" placeholder="文章id" value="${article.labelId}">
        <input type="text" class="cover-input5 updateTags" placeholder="文章标签" value="${article.tags}">
        <div class="toolbar5">
            <button>B</button>
            <button>I</button>
            <button>“</button>
            <button>🔗</button>
            <button>📷</button>
            <button>{} </button>
            <button>≡</button>
        </div>
        <div class="editor-content5">
            <textarea placeholder="开始撰写文章内容..." class="updateContent" style="width: 100%; height: 100%">${article.content}</textarea>
        </div>
        <div class="status-bar5">
            <div>字符数：0 | 行数：1</div>
            <div>
                <button style="background:#1a73e8; color:white; padding:8px 24px" class="submitUpdate">更新</button>
            </div>
        </div>
    `;

                        // 字符统计（保留原有逻辑）
                        const textarea5 = editorPanel5.querySelector('.updateContent');
                        textarea5.addEventListener('input', () => {
                            const charCount = textarea5.value.length;
                            const lineCount = textarea5.value.split('\n').length;
                            editorPanel5.querySelector('.status-bar5 div:first-child').innerHTML =
                                `字符数：${charCount} | 行数：${lineCount}`;
                        });

                        const submitUpdate = document.querySelector('.submitUpdate');
                        submitUpdate.addEventListener('click', () => {
                            alert('提交更新文章被点击')
                            const updateTitle=document.querySelector('.updateTitle').value
                            const updateCoverUrl=document.querySelector('.updateCoverUrl').value
                            const updateSummary=document.querySelector('.updateSummary').value
                            const updateLabelId=document.querySelector('.updateLabelId').value
                            const updateTags=document.querySelector('.updateTags').value
                            const updateContent=document.querySelector('.updateContent').value
                            const data={
                                articleId:articleId,
                                userId:userdata.userId,
                                title:updateTitle,
                                coverUrl:updateCoverUrl,
                                content:updateContent,
                                summary:updateSummary,
                                labelId:updateLabelId,
                                tags:updateTags
                            }
                            console.log("上传的数据是:",data)
                            let xhr=new XMLHttpRequest();
                            xhr.open(
                                'POST',
                                `http://43.136.111.27:8086/article/update`
                            )
                            xhr.setRequestHeader('Content-Type', 'application/json')
                            xhr.setRequestHeader('Authorization', `${key}`)
                            xhr.send(JSON.stringify(data))
                            xhr.onreadystatechange=function (){
                                if(xhr.readyState===4&&xhr.status===200){
                                    let response=JSON.parse(xhr.responseText);
                                    console.log("更新文章的结果为:",response)
                                }
                            }
                        })

                        return;
                    }

                    if(event.target.closest('.prepareDelete')){
                        event.stopPropagation();
                        alert('删除文章按钮被点击')
                        const div=event.target.closest('div[articleId]')
                        const articleId=div.getAttribute('articleId')
                        console.log("当前要删除的文章id是",articleId)
                        div.remove()
                        mywork2=mywork2.filter(item=>String(item.articleId)!==String(articleId))
                        console.log("当前我的作品的数组是",mywork2)
                        const data={
                            articleId:articleId,
                            userId:userdata.userId,
                            isDeleted:1,
                        }
                        let xhr=new XMLHttpRequest();
                        xhr.open(
                            'POST',
                            `http://43.136.111.27:8086/article/delete`
                        )
                        xhr.setRequestHeader('Content-Type', 'application/json')
                        xhr.setRequestHeader('Authorization', `${key}`)
                        xhr.send(JSON.stringify(data))
                        xhr.onreadystatechange=function (){
                            if(xhr.readyState===4&&xhr.status===200){
                                console.log("删除文章情况为:",xhr.responseText)
                            }
                        }
                        return;
                    }

                    if(event.target.closest('div[articleId]')){
                        const articleId=event.target.closest('div[articleId]').getAttribute('articleId')
                        let xhr=new XMLHttpRequest()
                        xhr.open(
                            'GET',
                            `http://43.136.111.27:8086/article/detail/${articleId}`
                        )
                        xhr.setRequestHeader('Authorization',``)
                        xhr.send()
                        xhr.onreadystatechange=function (){
                            if(xhr.readyState===4&&xhr.status===200){
                                let detailresponse=JSON.parse(xhr.responseText)
                                console.log("获取到的文章详情是",detailresponse)
                                if(isLogin==1){
                                    alert('你已经登录')
                                    /*
                                    * 这是获取用户信息，因为不需要渲染评论，所以只用获取到个人信息和他的作品,他的粉丝，他的关注者就够了
                                    * */
                                    /*
                                    * 失败，没有token根本查看别人的个人信息
                                    *
                                    * */
                                    let xhr2=new XMLHttpRequest()
                                    xhr2.open(
                                        'GET',
                                        `http://43.136.111.27:8086/creator/profile/${detailresponse.data.userId}`
                                    )
                                    xhr2.setRequestHeader('Authorization',`${key}`)
                                    xhr2.send()
                                    xhr2.onreadystatechange=function (){
                                        if(xhr2.readyState===4&&xhr2.status===200){
                                            let response2=JSON.parse(xhr2.responseText)
                                            console.log("获取到的用户信息是:",response2)
                                            let xhr3=new XMLHttpRequest()
                                            xhr3.open(
                                                'GET',
                                                `http://43.136.111.27:8086/creator/following/${detailresponse.data.userId}`
                                            )
                                            xhr3.setRequestHeader('Authorization',`${key}`)
                                            xhr3.send()
                                            xhr3.onreadystatechange=function (){
                                                if(xhr3.readyState===4&&xhr3.status===200){
                                                    let response3=JSON.parse(xhr3.responseText)
                                                    console.log("当前创作者的关注信息是:",response3)
                                                    let xhr4=new XMLHttpRequest()
                                                    xhr4.open(
                                                        'GET',
                                                        `http://43.136.111.27:8086/creator/followers/${detailresponse.data.userId}`
                                                    )
                                                    xhr4.setRequestHeader('Authorization',`${key}`)
                                                    xhr4.send()
                                                    xhr4.onreadystatechange=function (){
                                                        if(xhr4.readyState===4&&xhr4.status===200){
                                                            let response4=JSON.parse(xhr4.responseText)
                                                            console.log("当前创作者的粉丝是:",response4)
                                                            let xhr5=new XMLHttpRequest()
                                                            xhr5.open(
                                                                'GET',
                                                                `http://43.136.111.27:8086/article/following-articles?followerId=${detailresponse.data.userId}`
                                                            )
                                                            xhr5.setRequestHeader('Authorization',`${key}`)
                                                            xhr5.send()
                                                            xhr5.onreadystatechange=function (){
                                                                if(xhr5.readyState===4&&xhr5.status===200){
                                                                    let response5=JSON.parse(xhr5.responseText)
                                                                    console.log("当前他的作品为:",response5)
                                                                    let xhr6=new XMLHttpRequest()
                                                                    xhr6.open(
                                                                        'GET',
                                                                        `http://43.136.111.27:8086/article/comment/list/${articleId}`
                                                                    )
                                                                    xhr6.setRequestHeader('Authorization',`${key}`)
                                                                    xhr6.send()
                                                                    xhr6.onreadystatechange=function (){
                                                                        if(xhr6.readyState===4&&xhr6.status===200){
                                                                            let response6=JSON.parse(xhr6.responseText)
                                                                            console.log("当前的评论为",response6)
                                                                            main.innerHTML=`
                                                                            <!-- 新增顶部返回栏 -->
                                                                            <main style="margin-top: 10px">
                                                                                <div class="article-page">
                                                                                    <!-- 左侧互动栏 -->
                                                                                    <div class="action-sidebar">
                                                                                        <div class="action-item">
                                                                                            <div class="count backFirstPage22">返回首页</div>
                                                                                        </div>
                                                                                        <div class="action-item">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#1E80FF"> <!-- 新增评论图标 -->
                                                                                                <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v12h-4zm0-6h4v4h-4z"/>
                                                                                            </svg>
                                                                                            <div class="count">浏览数:${detailresponse.data.viewCount}</div>
                                                                                        </div>
                                                                                        <div class="action-item collectitem">
                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                            </svg>
                                                                                            <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                        </div>
                                                                                        <!-- 点赞 -->
                                                                                        <div class="action-item gooditem" style="color:#FF4756">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                            </svg>
                                                                                            <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                        </div>

                                                                                        <!-- 评论 -->
                                                                                        <div class="action-item" style="color:#1E80FF">
                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-3 12H7v-2h10v2zm0-3H7V9h10v2zm0-3H7V6h10v2z"/>
                                                                                            </svg>
                                                                                            <div class="count">评论数:${response6.data.length}</div>

                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 中间文章内容 -->
                                                                                    <div class="article-main">
                                                                                        <div class="article-header">
                                                                                            <h1 class="title">${detailresponse.data.title}</h1>
                                                                                        </div>

                                                                                        <div class="article-content">
                                                                                            <p class="highlight">${detailresponse.data.content}</p>


                                                                                            <div class="keywords">
                                                                                                <span>${detailresponse.data.tags}</span>
                                                                                                <span>${detailresponse.data.labelId}</span>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="CommentContainer">
                                                                                            <div class="createComment">
                                                                                                <h6>来发布你的评论吧</h6>
                                                                                                <div><input type="text" class="nullContent" placeholder="请输入文本"></div>
                                                                                                <div><input type="text" class="nullimageUrl" placeholder="请输入图片网址"></div>
                                                                                                <div><button class="submitnull">发布</button></div>
                                                                                            </div>
                                                                                            <div class="createBackComment" style="display: none">
                                                                                                <h6>来发布你的回复吧</h6>
                                                                                                <div><input type="text" class="parContent" placeholder="请输入回复文本"></div>
                                                                                                <div><input type="text" class="parimageUrl" placeholder="请输入回复图片网址"></div>
                                                                                                <div><button class="submitpar">发布</button></div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                    <!-- 右侧用户信息 -->
                                                                                    <div class="user-sidebar">
                                                                                        <div class="user-card">
                                                                                            <div class="user-header"> <!-- 新增flex容器 -->
                                                                                                <img src="${response2.data.avatar}" class="user-avatar" style="width:60px;height:60px">
                                                                                                <div class="user-info">
                                                                                                    <h3>${response2.data.username}</h3>
                                                                                                    <p class="position">${response2.data.profession}</p>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="stats">
                                                                                                <div>
                                                                                                    <div class="number">${response5.data.records.length}</div>
                                                                                                    <div class="label">文章</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response3.data.records.length}</div>
                                                                                                    <div class="label">关注</div>
                                                                                                </div>
                                                                                                <div>
                                                                                                    <div class="number">${response4.data.records.length}</div>
                                                                                                    <div class="label">粉丝</div>
                                                                                                </div>
                                                                                            </div>

                                                                                            <div class="actions isFollow">
                                                                                                <button class="follow-btn prepareFollowing">关注</button>
                                                                                                <button class="message-btn">私信</button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </main>
                                                                        `
                                                                            const isFollow=document.querySelector('.isFollow')
                                                                            let followStatus=followingArray.some(user=>user.userId===detailresponse.data.userId)
                                                                            if(followStatus){
                                                                                isFollow.innerHTML=`
                                                                                                        <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                        <button class="message-btn">私信</button>
                                                                                                    `
                                                                            }

                                                                            isFollow.addEventListener('click',function (e){
                                                                                if(e.target.closest('.deleteFollowing')){
                                                                                    isFollow.innerHTML=`
                                                                                                            <button class="follow-btn prepareFollowing">关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                    followingArray = followingArray.filter(user => String(user.userId) !== String(detailresponse.data.userId));
                                                                                    console.log("当前的关注者数组是",followingArray)
                                                                                    /*
                                                                                    *
                                                                                    * 在这里写请求就行
                                                                                    *
                                                                                    * */
                                                                                    const data={
                                                                                        userId:detailresponse.data.userId
                                                                                    }
                                                                                    let xhr = new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/user/unfollow`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.setRequestHeader('Content-Type','application/json')
                                                                                    xhr.send(JSON.stringify(data))
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log(xhr.response)
                                                                                        }
                                                                                    }
                                                                                }

                                                                                if(e.target.closest('.prepareFollowing')){
                                                                                    isFollow.innerHTML=`
                                                                                                            <button class="follow-btn deleteFollowing">取消关注</button>
                                                                                                            <button class="message-btn">私信</button>
                                                                                                        `
                                                                                    followingArray.push(response2.data)
                                                                                    console.log("当前的关注者数组是",followingArray)
                                                                                    const data={
                                                                                        userId:response2.data.userId
                                                                                    }

                                                                                    /*
                                                                                    * 在这里写请求就行
                                                                                    *
                                                                                    * */
                                                                                    let xhr = new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/user/follow`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.setRequestHeader('Content-Type','application/json')
                                                                                    xhr.send(JSON.stringify(data))
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log(xhr.response)
                                                                                        }
                                                                                    }

                                                                                }
                                                                            })

                                                                            const collectitem= document.querySelector('.collectitem')
                                                                            let collectstatus=collectArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                            if(collectstatus){
                                                                                collectitem.innerHTML=`
                                                                                                        <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                            <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                        </svg>
                                                                                                        <div class="count">收藏数:${detailresponse.data.collectCount}</div>
                                                                                                        <div class="count deleteCollect">(已收藏)</div>
                                                                                                    `
                                                                            }
                                                                            let currentcollect=detailresponse.data.collectCount
                                                                            collectitem.addEventListener('click',function (e){

                                                                                if(e.target.closest('.deleteCollect')){
                                                                                    currentcollect--
                                                                                    collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count prepareCollect">(未收藏)</div>
                                                                                                        `
                                                                                    collectArray=collectArray.filter(article=>String(article.articleId)!==String(detailresponse.data.articleId))
                                                                                    console.log("当前的收藏数组为",collectArray)
                                                                                    /*
                                                                                    *
                                                                                    * 这里写取消关注按钮
                                                                                    *
                                                                                    * */
                                                                                    let xhr= new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/uncollect/${detailresponse.data.articleId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("取消收藏的情况为:",xhr.response)
                                                                                        }
                                                                                    }
                                                                                }
                                                                                if(e.target.closest('.prepareCollect')){
                                                                                    currentcollect++
                                                                                    collectitem.innerHTML=`
                                                                                                            <svg width="24" height="24" viewBox="0 0 48 48" fill="#FFB121">
                                                                                                                <path d="M24 40.2l-12.6 6.6 3.2-14.4L.4 18.6l14.6-1.2L24 4l9 13.4 14.6 1.2-10.2 9.8 3.2 14.4z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">收藏数:${currentcollect}</div>
                                                                                                            <div class="count deleteCollect">(已收藏)</div>
                                                                                                        `
                                                                                    collectArray.push(detailresponse.data)
                                                                                    console.log("当前的收藏数组是",collectArray)
                                                                                    /*
                                                                                    * 这里写收藏按钮
                                                                                    *
                                                                                    * */
                                                                                    let xhr= new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/collect/${detailresponse.data.articleId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("收藏的情况为:",xhr.response)
                                                                                        }
                                                                                    }
                                                                                }
                                                                            })


                                                                            const gooditem= document.querySelector('.gooditem')
                                                                            let goodstatus=likeArray.some(article=>article.articleId===detailresponse.data.articleId)
                                                                            if(goodstatus){
                                                                                gooditem.innerHTML=`
                                                                                                       <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                       </svg>
                                                                                                       <div class="count">点赞数:${detailresponse.data.likeCount}</div>
                                                                                                       <div class="count deletegood">(取消点赞)</div>
                                                                                                    `
                                                                            }
                                                                            let currentgood=detailresponse.data.likeCount
                                                                            gooditem.addEventListener('click',function (e){
                                                                                if(e.target.closest('.deletegood')){
                                                                                    currentgood--
                                                                                    gooditem.innerHTML=`
                                                                                                            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                            </svg>
                                                                                                            <div class="count">点赞数:${currentgood}</div>
                                                                                                            <div class="count preparegood">(未点赞)</div>
                                                                                                        `
                                                                                    likeArray=likeArray.filter(article => String(article.articleId)!==String(detailresponse.data.articleId))
                                                                                    console.log("当前的喜欢文章数组是",likeArray)
                                                                                    let xhr = new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/unlike/${detailresponse.data.articleId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("取消点赞为:",xhr.response)
                                                                                        }
                                                                                    }
                                                                                }

                                                                                if(e.target.closest('.preparegood')){
                                                                                    currentgood++
                                                                                    gooditem.innerHTML=`
                                                                                                           <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
                                                                                                                    <path d="M2 8.4C2 5 4 3 7 3h1c2 0 4 1 5 3l2 3h3c3 0 5 2 5 5v3c0 3-2 5-5 5H6c-2 0-4-1-4-4v-9z"/>
                                                                                                           </svg>
                                                                                                           <div class="count">点赞数:${currentgood}</div>
                                                                                                           <div class="count deletegood">(取消点赞)</div>
                                                                                                        `
                                                                                    likeArray.push(detailresponse.data)
                                                                                    console.log("当前的喜欢文章数组是",likeArray)
                                                                                    let xhr = new XMLHttpRequest();
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/like/${detailresponse.data.articleId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("点赞情况为:",xhr.response)
                                                                                        }
                                                                                    }
                                                                                }
                                                                            })

                                                                            console.log("当前的评论为:",response6)
                                                                            const commentContainer=document.querySelector('.CommentContainer')
                                                                            response6.data.forEach(item => {
                                                                                //判断这个文章的父亲id为0同时这个评论的
                                                                                console.log("这个评论是",item)
                                                                                let xhr = new XMLHttpRequest();
                                                                                xhr.open(
                                                                                    'GET',
                                                                                    `http://43.136.111.27:8086/creator/profile/${item.commentUser}`
                                                                                )
                                                                                xhr.setRequestHeader('Authorization',`${key}`)
                                                                                xhr.send()
                                                                                xhr.onreadystatechange=function (){
                                                                                    if(xhr.readyState===4&&xhr.status===200){
                                                                                        let response14=JSON.parse(xhr.responseText)
                                                                                        console.log("当前评论的用户信息是",response14.data)
                                                                                        if(item.parentId==null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            console.log("当前的这个评论div是",div)
                                                                                            commentContainer.appendChild(div)
                                                                                        }
                                                                                        if(item.parentId==null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            console.log("当前的这个评论div是",div)
                                                                                            commentContainer.appendChild(div)
                                                                                        }
                                                                                        if(item.parentId!=null&&item.commentUser==userdata.userId&&item.isDeleted==0){
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                            console.log("这个孩子评论为:",div)
                                                                                            console.log("选中的父亲id是",item.parentId)
                                                                                            console.log("选中的父亲元素是",parentdiv)
                                                                                            const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                            childrenComment.appendChild(div)
                                                                                        }
                                                                                        if(item.parentId!=null&&item.commentUser!=userdata.userId&&item.isDeleted==0){
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${item.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${response14.data.avatar}"><span>${response14.data.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${item.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${item.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${item.createTime}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            const parentdiv=document.querySelector(`.commentItem[commentId="${item.parentId}"]`)
                                                                                            console.log("选中的父亲元素是",parentdiv)
                                                                                            const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                            childrenComment.appendChild(div)
                                                                                        }
                                                                                    }
                                                                                }

                                                                            })

                                                                            let parentId=null
                                                                            commentContainer.addEventListener('click',function (e1){
                                                                                if(e1.target.closest('.backComment1')){
                                                                                    alert('回复评论被点击')
                                                                                    const div=e1.target.closest('div[commentId]')
                                                                                    parentId=div.getAttribute('commentId')
                                                                                    console.log("当前回复的父亲id是:",parentId)
                                                                                    const createBackComment=document.querySelector('.createBackComment')
                                                                                    createBackComment.style.display='block'
                                                                                }

                                                                                if(e1.target.closest('.submitpar')){
                                                                                    alert('提交回复被点击')
                                                                                    const parContent=document.querySelector('.parContent').value
                                                                                    const parimageUrl=document.querySelector('.parimageUrl').value
                                                                                    const data={
                                                                                        articleId:detailresponse.data.articleId,
                                                                                        content:parContent,
                                                                                        imageUrl:parimageUrl,
                                                                                        parentId:parentId,
                                                                                    }
                                                                                    console.log("当前发送的数据是:",data)
                                                                                    // 清空输入框并隐藏
                                                                                    document.querySelector('.parContent').value = '';
                                                                                    document.querySelector('.parimageUrl').value = '';
                                                                                    document.querySelector('.createBackComment').style.display = 'none';
                                                                                    //在这里服务器确实返回了commentId
                                                                                    let xhr = new XMLHttpRequest()
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/comment/add`
                                                                                    )
                                                                                    xhr.setRequestHeader('Content-Type', 'application/json')
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send(JSON.stringify(data))
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            let response16=JSON.parse(xhr.responseText)
                                                                                            console.log("发送评论情况为:",response16)
                                                                                            // 获取当前时间并格式化
                                                                                            const formatTime = () => {
                                                                                                const now = new Date();
                                                                                                const year = now.getFullYear();
                                                                                                const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                                const day = String(now.getDate()).padStart(2, '0');
                                                                                                const hours = String(now.getHours()).padStart(2, '0');
                                                                                                const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                                const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                            };
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            const parentdiv=document.querySelector(`.commentItem[commentId="${data.parentId}"]`)
                                                                                            console.log("这个孩子评论为:",div)
                                                                                            console.log("选中的父亲id是",data.parentId)
                                                                                            console.log("选中的父亲元素是",parentdiv)
                                                                                            const childrenComment=parentdiv.querySelector('.childrenComment')
                                                                                            childrenComment.appendChild(div)
                                                                                        }
                                                                                    }
                                                                                }

                                                                                if(e1.target.closest('.deleteComment')){
                                                                                    alert('删除按钮被点击')
                                                                                    const div=e1.target.closest('.commentItem[commentId]')
                                                                                    //这里是选父亲元素
                                                                                    commentId=div.getAttribute('commentId')
                                                                                    console.log("当前删除的最近元素id是:",commentId)
                                                                                    div.remove()
                                                                                    let xhr = new XMLHttpRequest()
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/comment/delete/${commentId}`
                                                                                    )
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send()
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            console.log("删除情况为:",xhr.responseText)
                                                                                        }
                                                                                    }
                                                                                }

                                                                                if(e1.target.closest('.submitnull')){
                                                                                    alert('提交评论被点击')
                                                                                    const nullContent=document.querySelector('.nullContent').value
                                                                                    const nullimageUrl=document.querySelector('.nullimageUrl').value
                                                                                    const data={
                                                                                        articleId:detailresponse.data.articleId,
                                                                                        content:nullContent,
                                                                                        imageUrl:nullimageUrl,
                                                                                        parentId:null
                                                                                    }
                                                                                    console.log("上传的null数据是",data)
                                                                                    let xhr = new XMLHttpRequest()
                                                                                    xhr.open(
                                                                                        'POST',
                                                                                        `http://43.136.111.27:8086/article/comment/add`
                                                                                    )
                                                                                    xhr.setRequestHeader('Content-Type', 'application/json')
                                                                                    xhr.setRequestHeader('Authorization',`${key}`)
                                                                                    xhr.send(JSON.stringify(data))
                                                                                    xhr.onreadystatechange=function (){
                                                                                        if(xhr.readyState===4&&xhr.status===200){
                                                                                            let response16=JSON.parse(xhr.responseText)
                                                                                            console.log("发送null评论情况为:",response16)
                                                                                            const formatTime = () => {
                                                                                                const now = new Date();
                                                                                                const year = now.getFullYear();
                                                                                                const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始要+1
                                                                                                const day = String(now.getDate()).padStart(2, '0');
                                                                                                const hours = String(now.getHours()).padStart(2, '0');
                                                                                                const minutes = String(now.getMinutes()).padStart(2, '0');
                                                                                                const seconds = String(now.getSeconds()).padStart(2, '0');

                                                                                                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                                                                                            };
                                                                                            const div=document.createElement('div')
                                                                                            div.innerHTML=`
                                                                                                                    <div class="commentItem" commentId="${response16.data.commentId}">
                                                                                                                        <div>
                                                                                                                        <img class="commentAvatar" src="${userdata.avatar}"><span>${userdata.username}</span>
                                                                                                                        </div>
                                                                                                                        <div class="commentContent">${data.content}</div>
                                                                                                                        <div class="commentIMG"><img src="${data.imageUrl}" alt="" style="width: 100%;height: 100%"></div>
                                                                                                                        <div class="commentTime">${formatTime()}</div>
                                                                                                                        <div class="backComment">
                                                                                                                            <button class="backComment1">回复</button>
                                                                                                                            <button class="deleteComment">删除</button>
                                                                                                                        </div>
                                                                                                                        <div class="childrenComment"></div>
                                                                                                                    </div>
                                                                                                                `
                                                                                            commentContainer.appendChild(div)
                                                                                        }
                                                                                    }
                                                                                }
                                                                            })

                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                })
                document.addEventListener('input', function (e) {
                    // 创作者列表输入框防抖
                    const creatorInput = e.target.closest('.creatorList');
                    if (creatorInput) {
                        clearTimeout(creatorInput._timer); // 清除旧定时器
                        creatorInput._timer = setTimeout(() => {
                            console.log("创作者列表关键词:", creatorInput.value);
                            let xhr=new XMLHttpRequest();
                            xhr.open(
                                'GET',
                                `http://43.136.111.27:8086/search/article/creators?keyword=${creatorInput.value}`
                            )
                            xhr.setRequestHeader('Authorization',`${key}`)
                            xhr.send()
                            xhr.onreadystatechange=function (){
                                if(xhr.readyState===4&&xhr.status===200){
                                    let response=JSON.parse(xhr.responseText)
                                    console.log("当前的创作者搜索结果为:",response.data)
                                    editorPanel5.innerHTML=``
                                    response.data.forEach(item=>{
                                        const div = document.createElement('div')
                                        div.setAttribute('userId', item.userId)
                                        //关注者数组是否包含
                                        let followStatus=followingArray.some(user=>user.userId===item.userId)
                                        if(followStatus){
                                            div.innerHTML = `
                        <div class="tech-item">
                            <div class="tech-left">
                                <div class="tech-icon css-icon">
                                       <img src="${item.avatar}" alt="" style="width: 100%; height: 100%" class="SeeHisPage">
                                </div>
                                <span class="tech-name">${item.username}</span>
                            </div>
                            <button class="follow-btn1 deleteFollow">已关注</button>
                        </div>
                    `
                                        }
                                        else{
                                            div.innerHTML = `
                        <div class="tech-item">
                            <div class="tech-left">
                                <div class="tech-icon css-icon">
                                       <img src="${item.avatar}" alt="" style="width: 100%; height: 100%" class="SeeHisPage">
                                </div>
                                <span class="tech-name">${item.username}</span>
                            </div>
                            <button class="follow-btn1 prepareFollow">关注</button>
                        </div>`
                                        }
                                        editorPanel5.appendChild(div)
                                    })
                                }
                            }
                        }, 300); // 300ms 后执行
                    }

                    // 最热文章输入框防抖
                    const hottestInput = e.target.closest('.hottestArticle');
                    if (hottestInput) {
                        clearTimeout(hottestInput._timer);
                        hottestInput._timer = setTimeout(() => {
                            console.log("最热文章关键词:", hottestInput.value);
                            let xhr=new XMLHttpRequest();
                            xhr.open(
                                'GET',
                                `http://43.136.111.27:8086/search/article/hottest?keyword=${hottestInput.value}`
                            )
                            xhr.setRequestHeader('Authorization',`${key}`)
                            xhr.send()
                            xhr.onreadystatechange=function (){
                                if(xhr.readyState===4&&xhr.status===200){
                                    let response=JSON.parse(xhr.responseText)
                                    console.log("当前的最热文章搜索结果为:",response.data)
                                    editorPanel5.innerHTML=``
                                    response.data.forEach((item,index) => {
                                        const div = document.createElement('div')
                                        div.setAttribute('articleId', item.articleId)
                                        div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${index+1}:${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                                        editorPanel5.appendChild(div)
                                    })
                                }
                            }
                        }, 300);
                    }

                    // 最新文章输入框防抖（注意类名是 .newestArticle）
                    const newestInput = e.target.closest('.newestArticle');
                    if (newestInput) {
                        clearTimeout(newestInput._timer);
                        newestInput._timer = setTimeout(() => {
                            console.log("最新文章关键词:", newestInput.value);
                            let xhr=new XMLHttpRequest();
                            xhr.open(
                                'GET',
                                `http://43.136.111.27:8086/search/article/newest?keyword=${newestInput.value}`
                            )
                            xhr.setRequestHeader('Authorization',`${key}`)
                            xhr.send()
                            xhr.onreadystatechange=function (){
                                if(xhr.readyState===4&&xhr.status===200){
                                    let response=JSON.parse(xhr.responseText)
                                    console.log("当前的最新文章搜索结果为:",response.data)
                                    editorPanel5.innerHTML=``
                                    response.data.forEach((item,index) => {
                                        const div = document.createElement('div')
                                        div.setAttribute('articleId', item.articleId)
                                        div.innerHTML = `
                                        <div class="article-card">
            <div class="article-img">
                <img src="${item.coverUrl}" alt="" style="width: 100%; height: 100%">
            </div>
            <div class="article-content">
                <h3>${index+1}:${item.title}</h3>
                <div class="article-tags">
                    <div class="tag">${item.labelId}</div>
                    <div class="tag">${item.tags}</div>
                </div>
                <p class="article-desc">${item.summary}</p>
                <div class="article-meta">
                    <span>发表于:${item.createTime}</span>
                    <span>${item.viewCount} 阅读</span>
                    <span>${item.likeCount} 赞</span>
                    <span>更新于:${item.updateTime}</span>
                </div>
            </div>
        </div>
                                    `
                                        editorPanel5.appendChild(div)
                                    })
                                }
                            }
                        }, 300);
                    }

                    const searchUser=e.target.closest('.searchUser');
                    if(searchUser){
                        clearTimeout(searchUser._timer); // 清除旧定时器
                        searchUser._timer = setTimeout(() => {
                            console.log("创作者列表关键词:", searchUser.value);
                            let xhr=new XMLHttpRequest();
                            xhr.open(
                                'GET',
                                `http://43.136.111.27:8086/creator/profile/${searchUser.value}`
                            )
                            xhr.setRequestHeader('Authorization',`${key}`)
                            xhr.send()
                            xhr.onreadystatechange=function (){
                                if(xhr.readyState===4&&xhr.status===200){
                                    let response=JSON.parse(xhr.responseText)
                                    console.log("当前的用户搜索结果为:",response.data)
                                    editorPanel5.innerHTML=``
                                    const div = document.createElement('div')
                                    div.setAttribute('userId', response.data.userId)
                                    //关注者数组是否包含
                                    let followStatus=followingArray.some(user=>user.userId===response.data.userId)
                                    if(followStatus){
                                        div.innerHTML = `
                        <div class="tech-item">
                            <div class="tech-left">
                                <div class="tech-icon css-icon">
                                       <img src="${response.data.avatar}" alt="" style="width: 100%; height: 100%" class="SeeHisPage">
                                </div>
                                <span class="tech-name">${response.data.username}</span>
                            </div>
                            <button class="follow-btn1 deleteFollow">已关注</button>
                        </div>
                    `
                                    }
                                    else{
                                        div.innerHTML = `
                        <div class="tech-item">
                            <div class="tech-left">
                                <div class="tech-icon css-icon">
                                       <img src="${response.data.avatar}" alt="" style="width: 100%; height: 100%" class="SeeHisPage">
                                </div>
                                <span class="tech-name">${response.data.username}</span>
                            </div>
                            <button class="follow-btn1 prepareFollow">关注</button>
                        </div>`
                                    }
                                    editorPanel5.appendChild(div)
                                }
                            }
                        }, 300); // 300ms 后执行
                    }
                });
            }


            if(e1.target.closest('.submitArticle')){
                alert('提交文章按钮被点击')
                const articleTitle = document.querySelector('.articleTitle').value
                const articleCoverUrl = document.querySelector('.articleCoverUrl').value
                const articleContent = document.querySelector('.articleContent').value
                const articleTags = document.querySelector('.articleTags').value
                const articleLabelId = document.querySelector('.articleLabelId').value
                const articleSummary = document.querySelector('.articleSummary').value
                const textarea5 = document.querySelector('textarea')
                const data={
                    title:articleTitle,
                    coverUrl:articleCoverUrl,
                    content:articleContent,
                    summary:articleSummary,
                    labelId:articleLabelId,
                    tags:articleTags
                }
                console.log("当前上传的文章数据是:",data)
                let xhr=new XMLHttpRequest();
                xhr.open(
                    'POST',
                    `http://43.136.111.27:8086/article/publish`
                )
                xhr.setRequestHeader('Content-Type', 'application/json')
                xhr.setRequestHeader('Authorization', `${key}`)
                xhr.send(JSON.stringify(data))
                xhr.onreadystatechange=function (){
                    if(xhr.readyState===4&&xhr.status===200){
                        console.log("发布文章的情况为:",xhr.responseText)
                        // 清空所有输入框
                        document.querySelector('.articleTitle').value = '';
                        document.querySelector('.articleCoverUrl').value = '';
                        document.querySelector('.articleContent').value = '';
                        document.querySelector('.articleTags').value = '';
                        document.querySelector('.articleLabelId').value = '';
                        document.querySelector('.articleSummary').value = '';

                        // 触发输入事件更新字符统计
                        textarea5.dispatchEvent(new Event('input'));
                    }
                }
            }

            if(e1.target.closest('.updateArticle')){
                alert('更新文章被点击')
                mywork1=[]
                getMywork1(key)
            }

            if(e1.target.closest('.createArticle')){
                alert('创作文章被点击')
                const editorPanel5 = document.querySelector('.editor-panel5')
                editorPanel5.innerHTML=`
                    <div class="editor-header5">
                                <input type="text" class="article-title5 articleTitle" placeholder="输入文章标题...">
                            </div>

                            <input type="url" class="cover-input5 articleCoverUrl" placeholder="封面图片URL（请输入图片地址）">

                            <input type="text" class="cover-input5 articleSummary" placeholder="文章概要">

                            <input type="text" class="cover-input5 articleLabelId" placeholder="文章id">

                            <input type="text" class="cover-input5 articleTags" placeholder="文章标签">

                            <div class="toolbar5">
                                <button>B</button>
                                <button>I</button>
                                <button>“</button>
                                <button>🔗</button>
                                <button>📷</button>
                                <button>{} </button>
                                <button>≡</button>
                            </div>

                            <div class="editor-content5">
                                <textarea placeholder="开始撰写文章内容..." style="width: 100%;max-width: 100%;height: 100%;max-height: 100%" class="articleContent"></textarea>
                            </div>

                            <div class="status-bar5">
                                <div>字符数：0 | 行数：1</div>
                                <div>
                                    <button style="background:#1a73e8; color:white; padding:8px 24px" class="submitArticle">发布</button>
                                </div>
                            </div>
                `

                // 字符统计
                const textarea5 = document.querySelector('textarea')
                textarea5.addEventListener('input', () => {
                    const charCount = textarea5.value.length
                    const lineCount = textarea5.value.split('\n').length
                    document.querySelector('.status-bar5 div:first-child').innerHTML =
                        `字符数：${charCount} | 行数：${lineCount}`
                })
            }

            if(e1.target.closest('.deleteArticle')){
                alert('删除文章被点击')
                mywork2=[]
                getMywork2(key)
            }





        })
    })

</script>